Template:Tt/sandbox: Difference between revisions
If we name the classes differently, we can temporarily remove the JS |
Changing the class name to something more unique; initial opacity set back to 0 |
||
| Line 1: | Line 1: | ||
<includeonly><span class=" | <includeonly><span class="tt12345-target" style="white-space: initial; overflow-x: initial;">{{{1}}}<span class="tt12345-container tt12345-container-above"><span class="tt12345">{{{2}}}<span class="tt12345-chevron"></span></span></span></span>{{code | ||
|css= | |css= | ||
/* Target word for the tooltip to focus on */ | /* Target word for the tooltip to focus on */ | ||
. | .tt12345-target { | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
| Line 12: | Line 12: | ||
/* CONTAINER CLASSES */ | /* CONTAINER CLASSES */ | ||
/* A so-called 'container' for the tooltip to work around in */ | /* A so-called 'container' for the tooltip to work around in */ | ||
. | .tt12345-container { | ||
position: absolute; | position: absolute; | ||
left: 50%; | left: 50%; | ||
| Line 21: | Line 21: | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
opacity: | opacity: 0; | ||
pointer-events: none; | pointer-events: none; | ||
user-select: none; | user-select: none; | ||
| Line 30: | Line 30: | ||
/* Container appear above target */ | /* Container appear above target */ | ||
. | .tt12345-container-above { | ||
bottom: 90%; | bottom: 90%; | ||
transform: translate(-50%, 3px); | transform: translate(-50%, 3px); | ||
| Line 36: | Line 36: | ||
/* Container appear below target */ | /* Container appear below target */ | ||
. | .tt12345-container-below { | ||
top: 90%; | top: 90%; | ||
transform: translate(-50%, -3px); | transform: translate(-50%, -3px); | ||
| Line 44: | Line 44: | ||
/* The TOOLTIP itself */ | /* The TOOLTIP itself */ | ||
. | .tt12345 { | ||
background: #fff; | background: #fff; | ||
border-radius: 4px; | border-radius: 4px; | ||
| Line 58: | Line 58: | ||
/* CHEVRON CLASSES */ | /* CHEVRON CLASSES */ | ||
/* Shared class */ | /* Shared class */ | ||
. | .tt12345-chevron { | ||
position: absolute; | position: absolute; | ||
left: 50%; | left: 50%; | ||
| Line 69: | Line 69: | ||
/* When tooltip is above */ | /* When tooltip is above */ | ||
. | .tt12345-container-above .tt12345-chevron { | ||
top: 95%; | top: 95%; | ||
border-width: 9px 9px 0 9px; | border-width: 9px 9px 0 9px; | ||
| Line 76: | Line 76: | ||
/* When tooltip is below */ | /* When tooltip is below */ | ||
. | .tt12345-container-below .tt12345-chevron { | ||
bottom: 95%; | bottom: 95%; | ||
border-width: 0 9px 9px 9px; | border-width: 0 9px 9px 9px; | ||
| Line 86: | Line 86: | ||
/* HOVER ANIMATION CLASSES */ | /* HOVER ANIMATION CLASSES */ | ||
/* Above tooltip fade-in */ | /* Above tooltip fade-in */ | ||
. | .tt12345-target:hover .tt12345-container { | ||
opacity: 1; | opacity: 1; | ||
transform: translate(-50%, 0); | transform: translate(-50%, 0); | ||
| Line 96: | Line 96: | ||
/* Text bold on hover */ | /* Text bold on hover */ | ||
. | .tt12345-target:hover { | ||
border-bottom: 0.0625em dashed; | border-bottom: 0.0625em dashed; | ||
} | } | ||