No edit summary |
No edit summary |
||
Line 15: | Line 15: | ||
display: block; | display: block; | ||
position: relative; | position: relative; | ||
top: 2em; | |||
right: 100%; | |||
width: max-content; | width: max-content; | ||
max-width: 400px; | max-width: 400px; | ||
Line 23: | Line 24: | ||
text-align: center; | text-align: center; | ||
border-radius: 8px; | border-radius: 8px; | ||
} | |||
.tt-after { | |||
content: ''; | |||
position: absolute; | |||
bottom: 100%; | |||
left: 50%; | |||
margin-left: -8px; | |||
width: 0; | |||
height: 0; | |||
border-bottom: 8px solid #000000; | |||
border-right: 8px solid transparent; | |||
border-left: 8px solid transparent; | |||
} | } |
Revision as of 15:49, 2 May 2025
.has-tt { display: inline; } .tt-wrapper { position: absolute; visibility: hidden; } .has-tt:hover .tt-wrapper { visibility: visible; } .tt { display: block; position: relative; top: 2em; right: 100%; width: max-content; max-width: 400px; padding: 6px 12px; color: #FFFFFF; background: #353535; text-align: center; border-radius: 8px; } .tt-after { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-bottom: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent; }