Difference between revisions of "Template:Tt"
From Detective Conan Wiki
(Minor chevron fix, it won't shift out of position when the tooltip gets too large) |
(Tag: Undo) |
||
| (9 intermediate revisions by 3 users not shown) | |||
| Line 21: | Line 21: | ||
justify-content: center; | justify-content: center; | ||
opacity: 0; | opacity: 0; | ||
| + | z-index: 999; | ||
pointer-events: none; | pointer-events: none; | ||
user-select: none; | user-select: none; | ||
| Line 30: | Line 31: | ||
/* Container appear above target */ | /* Container appear above target */ | ||
.tt-container-above { | .tt-container-above { | ||
| − | bottom: | + | bottom: calc(100% - 2px); |
transform: translate(-50%, 3px); | transform: translate(-50%, 3px); | ||
} | } | ||
| Line 36: | Line 37: | ||
/* Container appear below target */ | /* Container appear below target */ | ||
.tt-container-below { | .tt-container-below { | ||
| − | top: | + | top: calc(100% - 2px); |
transform: translate(-50%, -3px); | transform: translate(-50%, -3px); | ||
} | } | ||
| Line 48: | Line 49: | ||
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); | filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); | ||
padding: 6px 9px; | padding: 6px 9px; | ||
| − | |||
| − | |||
| − | |||
| − | |||
text-align: center; | text-align: center; | ||
| + | overflow-wrap: anywhere; | ||
} | } | ||
| Line 70: | Line 68: | ||
/* When tooltip is above */ | /* When tooltip is above */ | ||
.tt-container-above .tt-chevron { | .tt-container-above .tt-chevron { | ||
| − | top: calc(100% - | + | top: calc(100% - 3px); |
border-width: 9px 9px 0 9px; | border-width: 9px 9px 0 9px; | ||
border-color: #fff transparent transparent transparent; | border-color: #fff transparent transparent transparent; | ||
| Line 77: | Line 75: | ||
/* When tooltip is below */ | /* When tooltip is below */ | ||
.tt-container-below .tt-chevron { | .tt-container-below .tt-chevron { | ||
| − | bottom: calc(100% - 2px) | + | bottom: calc(100% - 2px); |
border-width: 0 9px 9px 9px; | border-width: 0 9px 9px 9px; | ||
border-color: transparent transparent #fff transparent; | border-color: transparent transparent #fff transparent; | ||
Template documentation