Template:Tt/sandbox: Difference between revisions

← Older edit Newer edit →

Revision as of 20:57, 9 June 2025

We love DCDetective Conan^[1]^[2]^[3]

^ wjdid
^ qwoidjqwoi
^ e9qjr

[1] wjdid

[2] qwoidjqwoi

[3] 9qjr

[1]

[2]

[3]

@@ Line 1: / Line 1: @@
-<includeonly>{{code
+<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
-|html=%3Clabel%20class%3D%22tooltip-target%22%20for%3D%22%7B%7B%7BUID%7D%7D%7D%22%3E%0A%20%20%7B%7B%7Bparam%7D%7D%7D%0A%20%20%3Cinput%20type%3D%22checkbox%22%20class%3D%22tooltip-toggle%22%20id%3D%22%7B%7B%7BUID%7D%7D%7D%22%2F%3E%0A%20%20%3Cspan%20class%3D%22tooltip-container%20tooltip-container-above%22%3E%0A%20%20%20%20%3Cspan%20class%3D%22tooltip%22%3E%0A%20%20%20%20%20%20%7B%7B%7Bparam2%7D%7D%7D%0A%20%20%20%20%20%20%3Cspan%20class%3D%22chevron%22%3E%3C%2Fspan%3E%0A%20%20%20%20%3C%2Fspan%3E%0A%20%20%3C%2Fspan%3E%0A%3C%2Flabel%3E
-|param={{{1}}}
-|param2={{{2}}}
 |css=
-/* Target word for the tooltip to focus on */
+    /* Target word for the tooltip to focus on */
-.tooltip-target {
+    .tooltip-target {
-  position: relative;
+        position: relative;
-  display: inline-block;
+        display: inline-block;
-  border-bottom: 0.0625em dotted;
+        border-bottom: 0.0625em dotted;
-  cursor: help;
+        cursor: help;
-}
+    }
-.tooltip-toggle {
-  display: none;
-}
-/* CONTAINER CLASSES */
-/* A so-called 'container' for the tooltip to work around in */
-.tooltip-container {
-  position: absolute;
-  left: 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;
-  padding: 10px 0 8px;
-  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);
-}
-/* Container appear below target */
-.tooltip-container-below {
+    /* CONTAINER CLASSES */
-  top: 90%;
+    /* A so-called 'container' for the tooltip to work around in */
-  transform: translate(-50%, -3px);
+    .tooltip-container {
-}
+        position: absolute;
-/* END OF CONTAINER CLASSES */
+        left: 50%;
+        transform: translateX(-50%);
+        min-height: 1em;
-/* The TOOLTIP itself */
+        width: 170px;
-.tooltip {
+        padding: 10px 0 8px;
-  background: #fff;
+        display: flex;
-  border-radius: 4px;
+        justify-content: center;
-  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
+        opacity: 0;
-  padding: 6px 9px;
+        pointer-events: none;
-  max-width: 100%;
+        user-select: none;
-  height: min-content;
+        -webkit-user-select: none;
-  word-wrap: break-word;
+        -ms-user-select: none;
-  z-index: 999;
+        transition: 0.3s ease 0.1s; /* This is used for the hover animations */
-  text-align: center;
+    }
-}
+    /* Container appear above target */
+    .tooltip-container-above {
-/* CHEVRON CLASSES */
+        bottom: 90%;
-/* Shared class */
+        transform: translate(-50%, 3px);
-.chevron {
+    }
-  position: absolute;
-  left: 50%;
+    /* Container appear below target */
-  transform: translateX(-50%);
+    .tooltip-container-below {
-  width: 0;
+        top: 90%;
-  height: 0;
+        transform: translate(-50%, -3px);
-  border-style: solid;
+    }
-  z-index: 998;
+    /* END OF CONTAINER CLASSES */
-}
-/* When tooltip is above */
+    /* The TOOLTIP itself */
-.tooltip-container-above .chevron {
+    .tooltip {
-  top: 95%;
+        background: #fff;
-  border-width: 9px 9px 0 9px;
+        border-radius: 4px;
-  border-color: #fff transparent transparent transparent;
+        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
-}
+        padding: 6px 9px;
+        max-width: 100%;
-/* When tooltip is below */
+        height: min-content;
-.tooltip-container-below .chevron {
+        word-wrap: break-word;
-  bottom: 95%;
+        z-index: 999;
-  border-width: 0 9px 9px 9px;
+    }
-  border-color: transparent transparent #fff transparent;
-}
-/* END OF CHEVRON CLASSES */
+    /* CHEVRON CLASSES */
+    /* Shared class */
+    .chevron {
-/* HOVER ANIMATION CLASSES */
+        position: absolute;
-/* tooltip fade-in */
+        left: 50%;
-/* when text is clicked on touchscreens */
+        transform: translateX(-50%);
-/* @media (hover: none) and (pointer: coarse) { */
+        width: 0;
-@media (max-width: 450px) {
+        height: 0;
-  .tooltip-toggle:checked + .tooltip-container {
+        border-style: solid;
-    opacity: 1;
+        z-index: 998;
-    transform: translate(-50%, 0);
+    }
-    pointer-events: auto;
-    user-select: auto;
+    /* When tooltip is above */
-    webkit-user-select: auto;
+    .tooltip-container-above .chevron {
-    ms-user-select: auto;
+        top: 95%;
-  }
+        border-width: 9px 9px 0 9px;
-}
+        border-color: #fff transparent transparent transparent;
+    }
-/* Hover for desktop */
-@media (hover: hover) and (pointer: fine) {
+    /* When tooltip is below */
- .tooltip-target:hover .tooltip-container {
+    .tooltip-container-below .chevron {
-    opacity: 1;
+        bottom: 95%;
-    transform: translate(-50%, 0);
+        border-width: 0 9px 9px 9px;
-     pointer-events: auto;
+        border-color: transparent transparent #fff transparent;
-     user-select: auto;
+    }
-    webkit-user-select: auto;
+    /* END OF CHEVRON CLASSES */
-    ms-user-select: auto;
- }
-}
+    /* HOVER ANIMATION CLASSES */
-/* END OF HOVER ANIMATION CLASSES */
+    /* Above tooltip fade-in */
+    .tooltip-target:hover .tooltip-target:active .tooltip-container {
-}}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude>
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+        user-select: auto;
+        -webkit-user-select: auto;
+        -ms-user-select: auto;
+    }
+    /* Underline dashed on hover */
+    .tooltip-target:hover .tooltip-target:active {
+        border-bottom: 0.0625em dashed;
+     }
+     /* END OF HOVER ANIMATION CLASSES */
+}}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude>