Difference between revisions of "Template:Tt"
From Detective Conan Wiki
m (R0o0di moved page Template:Bracket to Template:Tt without leaving a redirect: the purpose of this template is to create a tooltip. "tt" makes more sense than "Bracket") |
|||
| Line 1: | Line 1: | ||
| − | <span class=" | + | <includeonly><span class="hover-text">{{{1}}}<span class="tooltip-container"><span class="tooltip"><span class="tooltip-text-container"><span>{{{2}}}</span></span></span></span></span> |
| + | {{css| | ||
| + | .hover-text { | ||
| + | display: inline-block; | ||
| + | position: relative; | ||
| + | text-decoration: underline dotted; | ||
| + | } | ||
| − | + | .hover-text:hover .tooltip-container { | |
| + | opacity: 1; | ||
| + | pointer-events: auto; | ||
| + | } | ||
| + | |||
| + | .tooltip-container { | ||
| + | opacity: 0; | ||
| + | pointer-events: none; | ||
| + | transition: opacity .3s ease | ||
| + | } | ||
| + | |||
| + | .tooltip { | ||
| + | position: absolute; | ||
| + | bottom: 100%; | ||
| + | left: 50%; | ||
| + | background: #fff; | ||
| + | color: #222; | ||
| + | padding: 4px 8px; | ||
| + | border: 1px solid #a9caf3; | ||
| + | border-radius: 4px; | ||
| + | box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); | ||
| + | z-index: 999; | ||
| + | width: max-content; | ||
| + | max-width: 150px; | ||
| + | overflow-wrap: break-word; | ||
| + | text-align: center; | ||
| + | transform: translateX(-50%) translateY(5px); | ||
| + | transition: transform .3s ease; | ||
| + | } | ||
| + | |||
| + | .hover-text:hover .tooltip { | ||
| + | transform: translateX(-50%) translateY(0); | ||
| + | } | ||
| + | |||
| + | .tooltip-text-container { | ||
| + | font-size: 90%; | ||
| + | margin-bottom: 1px; | ||
| + | } | ||
| + | }}</includeonly><noinclude>text text {{tt|Hover me|blablablablabla}} text text</noinclude> | ||
Revision as of 17:39, 1 June 2025
text text Hover me text text
