Template:Tt: Difference between revisions

Revision as of 10:28, 8 June 2025

text text {{tt|Hover me|blablablablabla}} text text

Results in: text text Hover meblablablablabla text text

@@ Line 1: / Line 1: @@
-<includeonly><span class="hover-text">{{{1}}}<span class="tooltip-container"><span class="tooltip"><span class="tooltip-text-container"><span>{{{2}}}</span></span></span></span></span>
+<includeonly><span class="tooltip-target" style="white-space: initial; overflow-x: initial;">{{{1}}}<span class="tooltip-container tooltip-container-above"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span>
 {{code
-|css=.hover-text {
+|css=
-      display: inline-block;
+    /* Target word for the tooltip to focus on */
-      position: relative;
+    .tooltip-target {
-      text-decoration: underline dotted;
+        position: relative;
+        display: inline-block;
+        border-bottom: 0.0625em dotted;
+        cursor: help;
      }
-     .hover-text:hover .tooltip-container {
-      opacity: 1;
+    /* CONTAINER CLASSES */
-      pointer-events: auto;
+     /* A so-called 'container' for the tooltip to work around in */
+    .tooltip-container {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        min-height: 1em;
+        width: 170px;
+        padding: 10px 0 8px;
+        display: flex;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        transition: 0.3s ease 0.1s; /* This is used for the hover animations */
+    }
+    /* Container appear above target */
+    .tooltip-container-above {
+        bottom: 90%;
+        transform: translate(-50%, 3px);
      }
-     .tooltip-container {
+    /* Container appear below target */
-      opacity: 0;
+     .tooltip-container-below {
-      pointer-events: none;
+        top: 90%;
-      transition: opacity .3s ease
+        transform: translate(-50%, -3px);
      }
+    /* END OF CONTAINER CLASSES */
+    /* The TOOLTIP itself */
      .tooltip {
-      position: absolute;
+        background: #fff;
-      bottom: 100%;
+        border-radius: 4px;
-      left: 50%;
+        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
-      background: #fff;
+        padding: 6px 9px;
-      color: #222;
+        max-width: 100%;
-      padding: 4px 8px;
+        height: min-content;
-      border: 1px solid #a9caf3;
+        word-wrap: break-word;
-      border-radius: 4px;
+        z-index: 999;
-      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
+    }
-      z-index: 999;
-      width: max-content;
-      max-width: 150px;
+    /* CHEVRON CLASSES */
-      overflow-wrap: break-word;
+    /* Shared class */
-      text-align: center;
+    .chevron {
-      transform: translateX(-50%) translateY(5px);
+        position: absolute;
-      transition: transform .3s ease;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-style: solid;
+        z-index: 998;
+    }
+    /* When tooltip is above */
+    .tooltip-container-above .chevron {
+        top: 95%;
+        border-width: 9px 9px 0 9px;
+        border-color: #fff transparent transparent transparent;
+    }
+    /* When tooltip is below */
+    .tooltip-container-below .chevron {
+        bottom: 95%;
+        border-width: 0 9px 9px 9px;
+        border-color: transparent transparent #fff transparent;
+    }
+    /* END OF CHEVRON CLASSES */
+    /* HOVER ANIMATION CLASSES */
+    /* Above tooltip fade-in */
+    .tooltip-target:hover .tooltip-container-above {
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+        user-select: auto;
+        -webkit-user-select: auto;
+        -ms-user-select: auto;
      }
-     .hover-text:hover .tooltip {
+    /* Below tooltip fade-in */
-      transform: translateX(-50%) translateY(0);
+     .tooltip-target:hover .tooltip-container-below {
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+        user-select: auto;
+        -webkit-user-select: auto;
+        -ms-user-select: auto;
      }
-     .tooltip-text-container {
+    /* Text bold on hover */
-      font-size: 90%;
+     .tooltip-target:hover {
-      margin-bottom: 1px;
+        border-bottom: 0.0625em dashed;
      }
+    /* END OF HOVER ANIMATION CLASSES */
 }}</includeonly><noinclude>
 <pre>text text {{tt|Hover me|blablablablabla}} text text</pre>