Difference between revisions of "Template:Tt"
From Detective Conan Wiki
m |
(Tag: Undo) |
||
| (17 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | <includeonly><span class=" | + | <includeonly><span class="tt-target">{{{1}}}<span class="tt-container tt-container-above" style="display: none;"><span class="tt-tooltip">{{{2}}}<span class="tt-chevron"></span></span></span></span>{{code |
|css= | |css= | ||
/* Target word for the tooltip to focus on */ | /* Target word for the tooltip to focus on */ | ||
| − | . | + | .tt-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 */ | ||
| − | . | + | .tt-container { |
position: absolute; | position: absolute; | ||
left: 50%; | left: 50%; | ||
| 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 29: | Line 30: | ||
/* Container appear above target */ | /* Container appear above target */ | ||
| − | . | + | .tt-container-above { |
| − | bottom: | + | bottom: calc(100% - 2px); |
transform: translate(-50%, 3px); | transform: translate(-50%, 3px); | ||
} | } | ||
/* Container appear below target */ | /* Container appear below target */ | ||
| − | . | + | .tt-container-below { |
| − | top: | + | top: calc(100% - 2px); |
transform: translate(-50%, -3px); | transform: translate(-50%, -3px); | ||
} | } | ||
| Line 43: | Line 44: | ||
/* The TOOLTIP itself */ | /* The TOOLTIP itself */ | ||
| − | .tooltip { | + | .tt-tooltip { |
background: #fff; | background: #fff; | ||
border-radius: 4px; | border-radius: 4px; | ||
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 58: | Line 56: | ||
/* CHEVRON CLASSES */ | /* CHEVRON CLASSES */ | ||
/* Shared class */ | /* Shared class */ | ||
| − | .chevron { | + | .tt-chevron { |
position: absolute; | position: absolute; | ||
left: 50%; | left: 50%; | ||
| Line 69: | Line 67: | ||
/* When tooltip is above */ | /* When tooltip is above */ | ||
| − | . | + | .tt-container-above .tt-chevron { |
| − | top: | + | 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 76: | Line 74: | ||
/* When tooltip is below */ | /* When tooltip is below */ | ||
| − | . | + | .tt-container-below .tt-chevron { |
| − | bottom: | + | 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; | ||
| Line 85: | Line 83: | ||
/* HOVER ANIMATION CLASSES */ | /* HOVER ANIMATION CLASSES */ | ||
| − | /* | + | /* Tooltip fade-in */ |
| − | . | + | .tt-target:hover .tt-container { |
opacity: 1; | opacity: 1; | ||
transform: translate(-50%, 0); | transform: translate(-50%, 0); | ||
| Line 94: | Line 92: | ||
-ms-user-select: auto; | -ms-user-select: auto; | ||
} | } | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
/* Text bold on hover */ | /* Text bold on hover */ | ||
| − | . | + | .tt-target:hover { |
border-bottom: 0.0625em dashed; | border-bottom: 0.0625em dashed; | ||
} | } | ||
/* END OF HOVER ANIMATION CLASSES */ | /* END OF HOVER ANIMATION CLASSES */ | ||
| − | }}</includeonly><noinclude> | + | }}</includeonly><noinclude>{{Documentation}} |
<pre>text text {{tt|Hover me|blablablablabla}} text text</pre> | <pre>text text {{tt|Hover me|blablablablabla}} text text</pre> | ||
Results in: text text {{tt|Hover me|blablablablabla}} text text | Results in: text text {{tt|Hover me|blablablablabla}} text text | ||
[[Category:Templates]] | [[Category:Templates]] | ||
</noinclude> | </noinclude> | ||
Template documentation