Difference between revisions of "User:Felyza/Sandbox/TooltipTest"
From EVE University Wiki
< User:Felyza | Sandbox
(Created page with "<style> →Tooltip container: .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; →If you want dots under the hoverable text: } ...") |
m |
||
| Line 1: | Line 1: | ||
| − | <style> | + | <nowiki><style> |
/* Tooltip container */ | /* Tooltip container */ | ||
.tooltip { | .tooltip { | ||
| Line 30: | Line 30: | ||
<div class="tooltip">Hover over me | <div class="tooltip">Hover over me | ||
<span class="tooltiptext">Tooltip text</span> | <span class="tooltiptext">Tooltip text</span> | ||
| − | </div> | + | </div><nowiki>Insert non-formatted text here</nowiki> |
| + | </nowiki> | ||
Revision as of 20:28, 12 September 2019
<style> /* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } </style> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div><nowiki>Insert non-formatted text here </nowiki>
