Template:Tt/sandbox: Difference between revisions
No edit summary |
No edit summary |
||
| 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 DCDetective Conan