From Dark and Darker Wiki
mNo edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
{{ | .tooltip { | ||
position: relative; | |||
display: inline-block; | |||
border-bottom: 1px dotted black; | |||
} | |||
.tooltip .tooltiptext { | |||
visibility: hidden; | |||
width: 120px; | |||
background-color: black; | |||
color: #fff; | |||
text-align: center; | |||
border-radius: 6px; | |||
padding: 5px 0; | |||
/* Position the tooltip */ | |||
position: absolute; | |||
z-index: 1; | |||
} | |||
.tooltip:hover .tooltiptext { | |||
visibility: visible; | |||
} | |||
</style> | |||
<body style="text-align:center;"> | |||
<h2>Basic Tooltip</h2> | |||
<p>Move the mouse over the text below:</p> | |||
<div class="tooltip">Hover over me | |||
<span class="tooltiptext">Tooltip text</span> | |||
</div> | |||
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p> | |||
Revision as of 22:00, 21 January 2024
Testing
.tooltip {
position: relative; display: inline-block; border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0;
/* Position the tooltip */ position: absolute; z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
} </style> <body style="text-align:center;">
Basic Tooltip
Move the mouse over the text below:
Hover over me
Tooltip text
Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.