From Dark and Darker Wiki
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
<!DOCTYPE html> | |||
<html> | |||
<style> | |||
.tooltip { | .tooltip { | ||
position: relative; | position: relative; | ||
| Line 37: | Line 40: | ||
<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> | <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> | ||
</body> | |||
</html> | |||
Revision as of 22:00, 21 January 2024
Testing
<!DOCTYPE html>
<html>
<style>
.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.
</body> </html>