Difference between revisions of "Template:Tt"
From Detective Conan Wiki
(avico's improved tooltip) |
|||
| Line 1: | Line 1: | ||
| − | <includeonly><span class=" | + | <includeonly><span class="tooltip-target" style="white-space: initial; overflow-x: initial;">{{{1}}}<span class="tooltip-container tooltip-container-above"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span> |
{{code | {{code | ||
| − | |css=. | + | |css= |
| − | + | /* Target word for the tooltip to focus on */ | |
| − | + | .tooltip-target { | |
| − | + | position: relative; | |
| + | display: inline-block; | ||
| + | border-bottom: 0.0625em dotted; | ||
| + | cursor: help; | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | /* CONTAINER CLASSES */ | |
| − | + | /* A so-called 'container' for the tooltip to work around in */ | |
| + | .tooltip-container { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | transform: translateX(-50%); | ||
| + | min-height: 1em; | ||
| + | width: 170px; | ||
| + | padding: 10px 0 8px; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | opacity: 0; | ||
| + | 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 */ | ||
| + | .tooltip-container-above { | ||
| + | bottom: 90%; | ||
| + | transform: translate(-50%, 3px); | ||
} | } | ||
| − | + | ||
| − | .tooltip-container { | + | /* Container appear below target */ |
| − | + | .tooltip-container-below { | |
| − | + | top: 90%; | |
| − | + | transform: translate(-50%, -3px); | |
} | } | ||
| − | + | /* END OF CONTAINER CLASSES */ | |
| + | |||
| + | |||
| + | /* The TOOLTIP itself */ | ||
.tooltip { | .tooltip { | ||
| − | + | background: #fff; | |
| − | + | border-radius: 4px; | |
| − | + | filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); | |
| − | + | padding: 6px 9px; | |
| − | + | max-width: 100%; | |
| − | + | height: min-content; | |
| − | + | word-wrap: break-word; | |
| − | + | z-index: 999; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | /* CHEVRON CLASSES */ | |
| − | + | /* Shared class */ | |
| − | + | .chevron { | |
| − | + | position: absolute; | |
| − | + | left: 50%; | |
| + | transform: translateX(-50%); | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | border-style: solid; | ||
| + | z-index: 998; | ||
| + | } | ||
| + | |||
| + | /* When tooltip is above */ | ||
| + | .tooltip-container-above .chevron { | ||
| + | top: 95%; | ||
| + | border-width: 9px 9px 0 9px; | ||
| + | border-color: #fff transparent transparent transparent; | ||
| + | } | ||
| + | |||
| + | /* When tooltip is below */ | ||
| + | .tooltip-container-below .chevron { | ||
| + | bottom: 95%; | ||
| + | border-width: 0 9px 9px 9px; | ||
| + | border-color: transparent transparent #fff transparent; | ||
| + | } | ||
| + | /* END OF CHEVRON CLASSES */ | ||
| + | |||
| + | |||
| + | /* HOVER ANIMATION CLASSES */ | ||
| + | /* Above tooltip fade-in */ | ||
| + | .tooltip-target:hover .tooltip-container-above { | ||
| + | opacity: 1; | ||
| + | transform: translate(-50%, 0); | ||
| + | pointer-events: auto; | ||
| + | user-select: auto; | ||
| + | -webkit-user-select: auto; | ||
| + | -ms-user-select: auto; | ||
} | } | ||
| − | + | ||
| − | . | + | /* Below tooltip fade-in */ |
| − | + | .tooltip-target:hover .tooltip-container-below { | |
| + | opacity: 1; | ||
| + | transform: translate(-50%, 0); | ||
| + | pointer-events: auto; | ||
| + | user-select: auto; | ||
| + | -webkit-user-select: auto; | ||
| + | -ms-user-select: auto; | ||
} | } | ||
| − | + | ||
| − | .tooltip- | + | /* Text bold on hover */ |
| − | + | .tooltip-target:hover { | |
| − | + | border-bottom: 0.0625em dashed; | |
} | } | ||
| + | /* END OF HOVER ANIMATION CLASSES */ | ||
| + | |||
}}</includeonly><noinclude> | }}</includeonly><noinclude> | ||
<pre>text text {{tt|Hover me|blablablablabla}} text text</pre> | <pre>text text {{tt|Hover me|blablablablabla}} text text</pre> | ||
Revision as of 10:28, 8 June 2025
text text {{tt|Hover me|blablablablabla}} text text
Results in: text text Hover me text text
