WIP reified properties tooltip (pending tests)

NatLibFi · Sep 13, 2022 · e3c02a4 · e3c02a4
1 parent 77c8ddd
commit e3c02a4
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 23 deletions.
diff --git a/resource/css/styles.css b/resource/css/styles.css
@@ -2724,6 +2724,10 @@ body, .versal, h1, h2, h3, p, .versal-bold {
  *
  * Created to replace https://github.com/qTip2/qTip2/ as that library is not maintained anymore,
  * and creates issues when trying to update JQuery versions.
+ *
+ * The .skosmos-tooltip{-wrapper} classes are derived from https://dev.to/r3zu3/pure-css-tooltip-1k3j.
+ *
+ * The .skosmos-tooltip-html* classes are from https://codepen.io/roydigerhund/pen/gPyzEa/.
  */
 .skosmos-tooltip-wrapper {
   width: fit-content;
@@ -2854,3 +2858,61 @@ body, .versal, h1, h2, h3, p, .versal-bold {
 .skosmos-tooltip.t-bottom:hover::after {
   transform: translate(-50%, calc(100% + 10px));
 }
+
+/* These classes were needed for the reified properties tooltips, as they displayed HTML elements.*/
+/*
+ * Example use case:
+ *
+ * <div class="tooltip-html">
+ *   <input type="button" value="Hover Me">
+ *   <div class="tooltip-html-content">
+ *     <p>First line</p>
+ *     <p>Second <a href="#">line</a></p>
+ *   </div>
+ * </div>
+ */
+/* NOTE: We only display this tooltip at the bottom of the element that triggered it, as the qtip
+ *       as its settings for the reified properties were doing so.
+ */
+.tooltip-html {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.tooltip-html:hover .tooltip-html-content, .tooltip-html:focus .tooltip-html-content {
+  visibility: visible;
+  opacity: 1;
+}
+
+.tooltip-html-content {
+  box-sizing: border-box;
+  position: absolute;
+  top: 26px;
+  left: 0;
+  display: block;
+  cursor: text;
+  width: 350px;
+  color: var(--white-color);
+  background-color: var(--tooltip-bg-color);
+  border: 3px solid var(--tooltip-border-color);
+  visibility: hidden;
+  opacity: 0;
+}
+
+/*
+ * The triangle that appears near the element that triggered it.
+ */
+.tooltip-html-content:after {
+  position: absolute;
+  content: '';
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  top: -5px;
+  left: 0;
+  margin-left: 15px;
+  color: var(--white-color);
+  background-color: var(--tooltip-bg-color);
+  border: 3px solid var(--tooltip-border-color);
+}
diff --git a/resource/js/docready.js b/resource/js/docready.js
@@ -80,16 +80,6 @@ $(function() { // DOCUMENT READY
       $(".tt-dropdown-menu").mCustomScrollbar({ alwaysShowScrollbar: 1, scrollInertia: 0 });
     }
 
-    $('.reified-property-value').each(function() {
-      // $(this).qtip({
-      //   content: $(this).next('.reified-tooltip'),
-      //   position: { my: 'top left', at: 'top left' },
-      //   style: { classes: 'qtip-skosmos' },
-      //   show: { delay: 100 },
-      //   hide: { fixed: true, delay: 400 }
-      // });
-    });
-
     var active_tab = $('a.active').parent().attr('id');
     if (active_tab == 'groups') {
       $('#sidebar > h4').remove();
@@ -502,19 +492,6 @@ $(function() { // DOCUMENT READY
     });
   });
 
-  $('.reified-property-value').each(function() {
-    // $(this).qtip({
-    //   content: $(this).next('.reified-tooltip'),
-    //   position: { my: 'top left', at: 'top left' },
-    //   style: { classes: 'qtip-skosmos' },
-    //   show: { delay: 100 },
-    //   hide: {
-    //     fixed: true,
-    //     delay: 400
-    //   }
-    // });
-  });
-
   // Setting the language parameters according to the clang parameter or if that's not possible the cookie.
   var search_lang = (content_lang !== '' && !getUrlParams().anylang && vocab !== '') ? content_lang : readCookie('SKOSMOS_SEARCH_LANG');