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="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
-<div class="banner">
-        <div class="left-banner">
-            <div style="font-size:162%; border:none; margin:0; padding:.1em; color:#000;">Welcome to [[Detective Conan]] Wiki,</div>
-            <div style="top:+0.2em; font-size:95%;">the ultimate resource about Detective Conan.</div>
-            <div id="articlecount" style="font-size:85%;">This wiki contains a total of [[Special:Statistics|{{NUMBEROFARTICLES}}]] articles thus far</div>
-        </div>
-        <div class="right-banner">
-             <div style="font-size:95%;" class="front">
-* [http://www.detectiveconanworld.com Homepage]
-* [http://www.detectiveconanworld.com/forum Forum]
-* [http://www.detectiveconanworld.com/contact Contact]
-            </div>
-            <div style="font-size:95%;">
-* [[Characters]]
-* [[Anime]]
-* [[Manga]]
-            </div>
-            <div style="font-size:95%;">
-* [[Movies]]
-* [[OVAs]]
-* [[Specials]]
-            </div>
-        </div>
-    </div>
-{{code
 |css=
+    /* Target word for the tooltip to focus on */
-body
+    .tt-target {
-{
+        position: relative;
-    font-family: sans-serif;
+        display: inline-block;
-}
+        border-bottom: 0.0625em dotted;
+        cursor: help;
+    }
-.banner
-{
-     background-color: #fcfcfc;
+    /* CONTAINER CLASSES */
-    border:1px solid #ccc;
+    /* A so-called 'container' for the tooltip to work around in */
-    color:#000;
+     .tt-container {
-    min-height: 75px;
+        position: absolute;
-    display: flex;
+        left: 50%;
-    flex-direction: row;
+        min-height: 1em;
-    align-items: center;
+        width: 170px;
-    justify-content: space-between;
+        padding: 10px 0 8px;
-}
+        display: flex;
+        justify-content: center;
-.left-banner
+        opacity: 0;
-{
+        z-index: 999;
-    display: flex;
+        pointer-events: none;
-    flex-direction: column;
+        user-select: none;
-    align-items: center;
+        -webkit-user-select: none;
-    width: 55vw;
+        -ms-user-select: none;
-}
+        transition: 0.3s ease 0.1s; /* This is used for the hover animations */
+    }
-.right-banner
-{
+    /* Container appear above target */
-    display: flex;
+    .tt-container-above {
-    justify-content: space-around;
+        bottom: calc(100% - 2px);
-     width: 35vw;
+        transform: translate(-50%, 3px);
-padding: 0px 5vw
+     }
-}
+    /* Container appear below target */
-/* .right-banner div:first-child
+    .tt-container-below {
-{
+        top: calc(100% - 2px);
-    margin-left: 15%;
+        transform: translate(-50%, -3px);
-}
+    }
+    /* END OF CONTAINER CLASSES */
-.right-banner div:last-child
-{
-    margin-right: 5%;
+    /* The TOOLTIP itself */
-} */
+    .tt-tooltip {
+        background: #fff;
+        border-radius: 4px;
-@media only screen and (max-width: 850px) {
+        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
+        padding: 6px 9px;
+        text-align: center;
-    .left-banner
+        overflow-wrap: anywhere;
-    {
+    }
-         width: 55%;
+    /* CHEVRON CLASSES */
+    /* Shared class */
+    .tt-chevron {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-style: solid;
+         z-index: 998;
      }
-     .right-banner
+    /* When tooltip is above */
-    {
+     .tt-container-above .tt-chevron {
-         width: 40%;
+        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;
-@media only screen and (max-width: 700px) {
+         border-color: transparent transparent #fff transparent;
-    .banner
-    {
-         flex-direction: column;
      }
+    /* END OF CHEVRON CLASSES */
-     .left-banner, .right-banner
-    {
-         width: ;
+    /* 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;
      }
-     .right-banner div
+    /* Text bold on hover */
-    {
+     .tt-target:hover {
-         margin: 0px;
+         border-bottom: 0.0625em dashed;
      }
-}
+    /* END OF HOVER ANIMATION CLASSES */
+}}</includeonly><noinclude>{{Documentation}}
+<pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
+Results in: text text {{tt|Hover me|blablablablabla}} text text
-}}
+[[Category:Templates]]
+</noinclude>