Template:Tt: Difference between revisions
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" |
No edit summary |
||
| 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 meblablablablabla Template:Css text text