Latest revision as of 17:04, 1 June 2025

This is a SANDBOX page, feel free to make any alterations.

Template:Css test

Hover over meTooltip text Template:Css

@@ Line 1: / Line 1: @@
 {{Hatnote|This is a '''SANDBOX''' page, feel free to make any alterations.}}
 __NOTOC__
+=Template:Css test=
+<span class="tooltip">Hover over me<span class="tooltiptext">Tooltip text</span></span>
+{{css|
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+.tooltip .tooltiptext {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s;
+  max-width: 320px;
+  width: max-content;           /* shrink-wrap text width */
+  background-color: white;
+  color: black;
+  text-align: left;
+  border-radius: 3px;
+  padding: 6px 10px;
+  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;          /* prevent text wrapping */
+  overflow-x: auto;             /* enable horizontal scroll if text too long */
+}
+.tooltip:hover .tooltiptext,
+.tooltip .tooltiptext:hover {
+  visibility: visible;
+  opacity: 1;
+}
+}}
 == Anime production staff ==
 === Screenplay ===