Difference between revisions of "Template:Tt"
From Detective Conan Wiki
(Tag: Undo) |
|||
| (23 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 */ |
| − | + | .tt-target { | |
| − | + | position: relative; | |
| − | + | display: inline-block; | |
| + | border-bottom: 0.0625em dotted; | ||
| + | cursor: help; | ||
} | } | ||
| − | + | ||
| − | .hover-text: | + | |
| − | + | /* CONTAINER CLASSES */ | |
| − | + | /* A so-called 'container' for the tooltip to work around in */ | |
| + | .tt-container { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | min-height: 1em; | ||
| + | width: 170px; | ||
| + | padding: 10px 0 8px; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | opacity: 0; | ||
| + | z-index: 999; | ||
| + | pointer-events: none; | ||
| + | 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 */ | ||
| + | .tt-container-above { | ||
| + | bottom: calc(100% - 2px); | ||
| + | transform: translate(-50%, 3px); | ||
| + | } | ||
| + | |||
| + | /* Container appear below target */ | ||
| + | .tt-container-below { | ||
| + | top: calc(100% - 2px); | ||
| + | transform: translate(-50%, -3px); | ||
| + | } | ||
| + | /* END OF CONTAINER CLASSES */ | ||
| + | |||
| + | |||
| + | /* The TOOLTIP itself */ | ||
| + | .tt-tooltip { | ||
| + | background: #fff; | ||
| + | border-radius: 4px; | ||
| + | filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); | ||
| + | padding: 6px 9px; | ||
| + | text-align: center; | ||
| + | overflow-wrap: anywhere; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* CHEVRON CLASSES */ | ||
| + | /* Shared class */ | ||
| + | .tt-chevron { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | transform: translateX(-50%); | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | border-style: solid; | ||
| + | z-index: 998; | ||
} | } | ||
| − | + | ||
| − | . | + | /* When tooltip is above */ |
| − | + | .tt-container-above .tt-chevron { | |
| − | + | top: calc(100% - 3px); | |
| − | + | border-width: 9px 9px 0 9px; | |
| + | border-color: #fff transparent transparent transparent; | ||
} | } | ||
| − | + | ||
| − | . | + | /* When tooltip is below */ |
| − | + | .tt-container-below .tt-chevron { | |
| − | + | bottom: calc(100% - 2px); | |
| − | + | border-width: 0 9px 9px 9px; | |
| − | + | border-color: transparent transparent #fff transparent; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | /* END OF CHEVRON CLASSES */ | |
| − | . | + | |
| − | + | ||
| + | /* HOVER ANIMATION CLASSES */ | ||
| + | /* Tooltip fade-in */ | ||
| + | .tt-target:hover .tt-container { | ||
| + | opacity: 1; | ||
| + | transform: translate(-50%, 0); | ||
| + | pointer-events: auto; | ||
| + | user-select: auto; | ||
| + | -webkit-user-select: auto; | ||
| + | -ms-user-select: auto; | ||
} | } | ||
| − | . | + | /* Text bold on hover */ |
| − | + | .tt-target:hover { | |
| − | + | border-bottom: 0.0625em dashed; | |
} | } | ||
| − | }}</includeonly><noinclude> | + | /* END OF HOVER ANIMATION CLASSES */ |
| + | |||
| + | }}</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</noinclude> | + | Results in: text text {{tt|Hover me|blablablablabla}} text text |
| + | [[Category:Templates]] | ||
| + | </noinclude> | ||
Template documentation