Template:Tt: Difference between revisions

Latest revision as of 12:34, 26 August 2025

Template documentation

Editors can experiment in this template's sandbox (edit \| diff) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template.

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

Results in: text text Hover meblablablablabla text text

@@ Line 1: / Line 1: @@
-<includeonly><span class="tooltip">{{{1}}}<span class="tooltiptext">{{{2}}}</span></span></includeonly>
+<includeonly><span class="tt-target">{{{1}}}<span class="tt-container tt-container-above" style="display: none;"><span class="tt-tooltip">{{{2}}}<span class="tt-chevron"></span></span></span></span>{{code
-{{css|
+|css=
-.tooltip {
+    /* Target word for the tooltip to focus on */
-  position: relative;
+    .tt-target {
-  display: inline-block;
+        position: relative;
-  border-bottom: 1px dotted black;
+        display: inline-block;
-}
+        border-bottom: 0.0625em dotted;
+        cursor: help;
+    }
+    /* CONTAINER CLASSES */
+    /* A so-called 'container' for the tooltip to work around in */
+    .tt-container {
+        position: absolute;
+        left: 50%;
+        min-height: 1em;
+        width: 170px;
+        padding: 10px 0 8px;
+        display: flex;
+        justify-content: center;
+        opacity: 0;
+        z-index: 999;
+        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 */
+    .tt-container-above {
+        bottom: calc(100% - 2px);
+        transform: translate(-50%, 3px);
+    }
+    /* Container appear below target */
+    .tt-container-below {
+        top: calc(100% - 2px);
+        transform: translate(-50%, -3px);
+    }
+    /* END OF CONTAINER CLASSES */
+    /* The TOOLTIP itself */
+    .tt-tooltip {
+        background: #fff;
+        border-radius: 4px;
+        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
+        padding: 6px 9px;
+        text-align: center;
+        overflow-wrap: anywhere;
+    }
+    /* CHEVRON CLASSES */
+    /* Shared class */
+    .tt-chevron {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-style: solid;
+        z-index: 998;
+    }
+    /* When tooltip is above */
+    .tt-container-above .tt-chevron {
+        top: calc(100% - 3px);
+        border-width: 9px 9px 0 9px;
+        border-color: #fff transparent transparent transparent;
+    }
+    /* When tooltip is below */
+    .tt-container-below .tt-chevron {
+        bottom: calc(100% - 2px);
+        border-width: 0 9px 9px 9px;
+        border-color: transparent transparent #fff transparent;
+    }
+    /* END OF CHEVRON CLASSES */
+    /* HOVER ANIMATION CLASSES */
+    /* Tooltip fade-in */
+    .tt-target:hover .tt-container {
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+        user-select: auto;
+        -webkit-user-select: auto;
+        -ms-user-select: auto;
+    }
-.tooltip .tooltiptext {
+    /* Text bold on hover */
-  visibility: hidden;
+    .tt-target:hover {
-  opacity: 0;
+        border-bottom: 0.0625em dashed;
-  transition: opacity 0.2s;
+    }
-  max-width: 320px;
+    /* END OF HOVER ANIMATION CLASSES */
-  width: max-content;
-  background-color: white;
+}}</includeonly><noinclude>{{Documentation}}
-  color: black;
+<pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
-  text-align: left;
+Results in: text text {{tt|Hover me|blablablablabla}} text text
-  border-radius: 3px;
+[[Category:Templates]]
-  padding: 6px 10px;
+</noinclude>
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  border: 1px solid #ccc;
-  position: absolute;
-  z-index: 1;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  white-space: nowrap;
-  overflow-x: auto;
-}
-.tooltip:hover .tooltiptext,
-.tooltip .tooltiptext:hover {
-  visibility: visible;
-  opacity: 1;
-}
-}}<noinclude>
-[[Category:Templates]]</noinclude>