Difference between revisions of "Template:Tt/sandbox"
From Detective Conan Wiki
| Line 1: | Line 1: | ||
<includeonly><span class="tooltip-target">{{{1}}}<span class="tooltip-container tooltip-container-above"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span></includeonly> | <includeonly><span class="tooltip-target">{{{1}}}<span class="tooltip-container tooltip-container-above"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span></includeonly> | ||
{{code | {{code | ||
| − | |css=.tooltip-target { | + | |css= |
| + | /* Target word for the tooltip to focus on */ | ||
| + | .tooltip-target { | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
| Line 8: | Line 10: | ||
} | } | ||
| − | + | ||
| + | /* CONTAINER CLASSES */ | ||
| + | /* A so-called 'container' for the tooltip to work around in */ | ||
.tooltip-container { | .tooltip-container { | ||
position: absolute; | position: absolute; | ||
| Line 20: | Line 24: | ||
opacity: 0; | opacity: 0; | ||
pointer-events: none; | pointer-events: none; | ||
| − | transition: 0.3s ease 0.1s; | + | user-select: none; |
| + | -webkit-user-select: none; | ||
| + | -ms-user-select: none; | ||
| + | transition: 0.3s ease 0.1s; /* This is used for the hover animations */ | ||
} | } | ||
| + | /* Container appear above target */ | ||
.tooltip-container-above { | .tooltip-container-above { | ||
bottom: 90%; | bottom: 90%; | ||
| Line 28: | Line 36: | ||
} | } | ||
| + | /* Container appear below target */ | ||
.tooltip-container-below { | .tooltip-container-below { | ||
top: 90%; | top: 90%; | ||
transform: translate(-50%, -3px); | transform: translate(-50%, -3px); | ||
} | } | ||
| + | /* END OF CONTAINER CLASSES */ | ||
| + | /* The TOOLTIP itself */ | ||
.tooltip { | .tooltip { | ||
background: #fff; | background: #fff; | ||
| Line 43: | Line 54: | ||
word-wrap: break-word; | word-wrap: break-word; | ||
z-index: 999; | z-index: 999; | ||
| − | |||
} | } | ||
| + | |||
| + | /* CHEVRON CLASSES */ | ||
| + | /* Shared class */ | ||
.chevron { | .chevron { | ||
position: absolute; | position: absolute; | ||
| Line 56: | Line 69: | ||
} | } | ||
| + | /* When tooltip is above */ | ||
.tooltip-container-above .chevron { | .tooltip-container-above .chevron { | ||
top: 95%; | top: 95%; | ||
| Line 62: | Line 76: | ||
} | } | ||
| + | /* When tooltip is below */ | ||
.tooltip-container-below .chevron { | .tooltip-container-below .chevron { | ||
bottom: 95%; | bottom: 95%; | ||
| Line 67: | Line 82: | ||
border-color: transparent transparent #fff transparent; | border-color: transparent transparent #fff transparent; | ||
} | } | ||
| + | /* END OF CHEVRON CLASSES */ | ||
| + | /* HOVER ANIMATION CLASSES */ | ||
| + | /* Above tooltip fade-in */ | ||
.tooltip-target:hover .tooltip-container-above { | .tooltip-target:hover .tooltip-container-above { | ||
opacity: 1; | opacity: 1; | ||
| Line 78: | Line 96: | ||
} | } | ||
| + | /* Below tooltip fade-in */ | ||
.tooltip-target:hover .tooltip-container-below { | .tooltip-target:hover .tooltip-container-below { | ||
opacity: 1; | opacity: 1; | ||
| Line 87: | Line 106: | ||
} | } | ||
| + | /* Text bold on hover */ | ||
.tooltip-target:hover { | .tooltip-target:hover { | ||
border-bottom: 0.0625em dashed; | border-bottom: 0.0625em dashed; | ||
} | } | ||
| + | /* END OF HOVER ANIMATION CLASSES */ | ||
}}<noinclude>We love {{tt/sandbox|DC|Detective Conan}}</noinclude> | }}<noinclude>We love {{tt/sandbox|DC|Detective Conan}}</noinclude> | ||
Revision as of 12:14, 7 June 2025
We love DC
