diff --git a/composer.json b/composer.json
index 4530b57d8..867801a37 100644
--- a/composer.json
+++ b/composer.json
@@ -65,8 +65,7 @@
"monolog/monolog": "1.23.*",
"newerton/jquery-mousewheel": "dev-master",
"pamelafox/lscache": "1.0.5",
- "malihu/malihu-custom-scrollbar-plugin": "3.1.5",
- "grimmlink/qtip2": "3.0.3"
+ "malihu/malihu-custom-scrollbar-plugin": "3.1.5"
},
"require-dev": {
"phpunit/phpunit": "9.5.*",
diff --git a/resource/css/styles.css b/resource/css/styles.css
index 977f251c7..343cb6c15 100644
--- a/resource/css/styles.css
+++ b/resource/css/styles.css
@@ -103,9 +103,6 @@ h1, .prefLabel, .prefLabelLang, .notation {
font-size: 16px;
}
-.multiselect span, .multiselect a, .dropdown-toggle, #search-all-button, .qtip-skosmos * {
-}
-
.topbar a.navigation-font, .topbar span {
color: var(--dark-color);
}
@@ -855,31 +852,10 @@ ul.dropdown-menu > li:last-child > input {
width: 50px;
}
-.qtip-skosmos {
- background-color: var(--tooltip-bg-color);
- border-radius: 0;
- border: 3px solid var(--tooltip-border-color);
- margin-top: 12px;
- margin-left: 9px;
- min-width: 400px;
-}
-
-.qtip-skosmos *, .reified-tooltip > p > span {
- color: var(--white-color);
- font-size: var(--font-size);
- font-weight: 400;
-}
-
-.qtip-skosmos a {
- color: var(--tooltip-text-color) !important;
- width: 100%;
-}
-
.reified-tooltip {
display: none;
margin-top: 5px;
width: 100%;
-
}
.reified-property-value > img {
@@ -2267,14 +2243,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
display: none;
}
- .qtip-skosmos:not(#qtip-0) {
- left: 0 !important;
- }
-
- .qtip-skosmos:not(#qtip-0) canvas {
- display: none !important;
- }
-
.content {
margin: 0 auto;
}
@@ -2321,14 +2289,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
margin-left: 10px;
margin-top: 20px;
}
-
- .qtip-skosmos {
- min-width: auto;
- left: 0 !important;
- }
- .qtip-skosmos canvas {
- display: none !important;
- }
}
@media (max-width: 530px) {
@@ -2755,3 +2715,139 @@ body, .versal, h1, h2, h3, p, .versal-bold {
border: 2px dashed #62729f !important;
}
+
+/*
+ * Skosmos tooltips.
+ *
+ * Created to replace https://github.com/qTip2/qTip2/ as that library is not maintained anymore,
+ * and creates issues when trying to update JQuery versions.
+ */
+.skosmos-tooltip-wrapper {
+ width: fit-content;
+}
+
+.skosmos-tooltip {
+ position: relative;
+}
+
+.skosmos-tooltip a {
+ color: var(--tooltip-text-color) !important;
+ width: 100%;
+}
+
+.skosmos-tooltip::before {
+ position: absolute;
+ content: ' ';
+ background-color: var(--tooltip-border-color);
+ border: 3px solid var(--tooltip-border-color);
+ width: 15px;
+ height: 15px;
+ z-index: 500;
+ opacity: 0;
+ transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
+ pointer-events: none;
+}
+
+.skosmos-tooltip::after {
+ content: attr(data-title);
+ /* https://www.digitalocean.com/community/tutorials/css-line-break-content-property */
+ white-space: pre-wrap;
+ max-width: 400px;
+ width: max-content;
+ display: inline-block;
+ border-radius: 0;
+ font-size: var(--font-size);
+ font-weight: 400;
+ color: var(--white-color);
+ background-color: var(--tooltip-bg-color);
+ border: 3px solid var(--tooltip-border-color);
+ position: absolute;
+ z-index: 555;
+ opacity: 0;
+ transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
+ pointer-events: none;
+ margin: 12px 0 0 9px;
+ padding: 0.25rem 0.5rem;
+}
+
+.skosmos-tooltip:hover::before, .skosmos-tooltip:hover::after {
+ opacity: 1;
+}
+
+.skosmos-tooltip.t-top::before {
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, 0) rotate(45deg);
+}
+
+.skosmos-tooltip.t-top::after {
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, 0);
+}
+
+.skosmos-tooltip.t-top:hover::before {
+ transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
+}
+
+.skosmos-tooltip.t-top:hover::after {
+ transform: translate(-50%, calc(-100% - 10px));
+}
+
+.skosmos-tooltip.t-left::before {
+ top: 25%;
+ left: 0;
+ transform: translate(0, 0%) rotate(45deg);
+}
+
+.skosmos-tooltip.t-left::after {
+ top: 0;
+ left: 0;
+}
+
+.skosmos-tooltip.t-left:hover::before {
+ transform: translate(calc(-100% - 5px)) rotate(45deg);
+}
+
+.skosmos-tooltip.t-left:hover::after {
+ transform: translate(calc(-100% - 10px));
+}
+
+.skosmos-tooltip.t-right::before {
+ top: 25%;
+ right: 0;
+ transform: translate(0, 0%) rotate(45deg);
+}
+
+.skosmos-tooltip.t-right::after {
+ top: 0;
+ right: 0;
+}
+
+.skosmos-tooltip.t-right:hover::before {
+ transform: translate(calc(100% + 5px)) rotate(45deg);
+}
+
+.skosmos-tooltip.t-right:hover::after {
+ transform: translate(calc(100% + 10px));
+}
+
+.skosmos-tooltip.t-bottom::before {
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, 0) rotate(45deg);
+}
+
+.skosmos-tooltip.t-bottom::after {
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, 0);
+}
+
+.skosmos-tooltip.t-bottom:hover::before {
+ transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
+}
+
+.skosmos-tooltip.t-bottom:hover::after {
+ transform: translate(-50%, calc(100% + 10px));
+}
diff --git a/resource/js/docready.js b/resource/js/docready.js
index 6632cac19..3b583e689 100644
--- a/resource/js/docready.js
+++ b/resource/js/docready.js
@@ -524,8 +524,6 @@ $(function() { // DOCUMENT READY
style: { classes: 'qtip-tipsy qtip-skosmos' }
};
- $('#navi4').qtip(qtip_skosmos);
-
$('.property-click').qtip(qtip_skosmos);
$('.redirected-vocab-id').qtip(qtip_skosmos);
diff --git a/view/topbar.twig b/view/topbar.twig
index f3e62abbe..5c91630fc 100644
--- a/view/topbar.twig
+++ b/view/topbar.twig
@@ -49,7 +49,7 @@
{% trans "Feedback" %}
-
{% trans "search_example_text" %}">
+
{% trans "Help" %}