Difference between revisions of "User:BOBO/Sandbox"

From Detective Conan Wiki
(Template:Css test)
(Template:Css test)
 
(2 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
__NOTOC__
 
__NOTOC__
 
=Template:Css test=
 
=Template:Css test=
<div class="tooltip">Hover over me<span class="tooltiptext">Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text Tooltip text </span></div>
+
<span class="tooltip">Hover over me<span class="tooltiptext">Tooltip text</span></span>
 
{{css|
 
{{css|
 
.tooltip {
 
.tooltip {
Line 8: Line 8:
 
   display: inline-block;
 
   display: inline-block;
 
   border-bottom: 1px dotted black;
 
   border-bottom: 1px dotted black;
  cursor: help;
 
 
}
 
}
  
Line 15: Line 14:
 
   opacity: 0;
 
   opacity: 0;
 
   transition: opacity 0.2s;
 
   transition: opacity 0.2s;
   width: 160px;
+
   max-width: 320px;
 +
  width: max-content;          /* shrink-wrap text width */
 
   background-color: white;
 
   background-color: white;
 
   color: black;
 
   color: black;
   text-align: center;
+
   text-align: left;
 
   border-radius: 3px;
 
   border-radius: 3px;
   padding: 6px 8px;
+
   padding: 6px 10px;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
+
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 
   border: 1px solid #ccc;
 
   border: 1px solid #ccc;
  
 
   position: absolute;
 
   position: absolute;
 
   z-index: 1;
 
   z-index: 1;
   bottom: 125%;
+
   bottom: 100%;
 
   left: 50%;
 
   left: 50%;
 
   transform: translateX(-50%);
 
   transform: translateX(-50%);
   pointer-events: auto;
+
    
 +
  white-space: nowrap;          /* prevent text wrapping */
 +
  overflow-x: auto;             /* enable horizontal scroll if text too long */
 
}
 
}
  

Latest revision as of 17:04, 1 June 2025

Template:Css test

Hover over meTooltip text Template:Css

Anime production staff

Screenplay


Organizer


Storyboard


Episode Director