Replace qtip JS library by a pure CSS tooltip

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.*",

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;
 }
 <![endif]-->
+
+/*
+ * 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));
+}

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);

view/topbar.twig

@@ -49,7 +49,7 @@
   <a href="{% if request.vocabid and vocab.title%}{{ request.vocabid }}/{% endif %}{{ request.lang }}/feedback{% if request.contentLang and request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}{% if request.queryParam('anylang') == 'on' %}{% if request.contentLang == request.lang %}?{% else %}&{% endif %}anylang=on{% endif %}" id="navi3" class="navigation-font">
   {% trans "Feedback" %}
   </a>
-  <span id="navi4" tabindex="0" title="{% trans "helper_help" %}<br /><br />{% trans "search_example_text" %}">
+  <span class="skosmos-tooltip-wrapper skosmos-tooltip t-bottom" id="navi4" tabindex="0" data-title="{% trans "helper_help" %} &#xa; &#xa; {% trans "search_example_text" %}">
     <span class="navigation-font">{% trans "Help" %}</span>
   </span>
 </div>