Template:Tt/sandbox: Difference between revisions

← Older edit Newer edit →

Revision as of 20:58, 9 June 2025

We love ^[1]^[2]

^ qwoidjqwoi
^ e9qjr

[1] qwoidjqwoi

[2] 9qjr

[1]

[2]

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