Difference between revisions of "Template:Tt"
From Detective Conan Wiki
(Replaced content with "<span class="under">Goso</span> {{code |css= .under { text-decoration: none !important; color: black !important; } }}") (Tag: Replaced) |
(Tag: Undo) |
||
| Line 1: | Line 1: | ||
| − | + | <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 | |
| − | {{code | ||
|css= | |css= | ||
| − | . | + | /* Target word for the tooltip to focus on */ |
| − | { | + | .tt-target { |
| − | text- | + | position: relative; |
| − | color: | + | display: inline-block; |
| − | } | + | border-bottom: 0.0625em dotted; |
| + | cursor: help; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* 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; | ||
| + | } | ||
| + | /* END OF HOVER ANIMATION CLASSES */ | ||
| + | |||
| + | }}</includeonly><noinclude>{{Documentation}} | ||
| + | <pre>text text {{tt|Hover me|blablablablabla}} text text</pre> | ||
| + | Results in: text text {{tt|Hover me|blablablablabla}} text text | ||
| + | [[Category:Templates]] | ||
| + | </noinclude> | ||
Template documentation