- Create tooltips with CSS.
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.
The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body style="text-align:center;">
<p>Tab over the text below:</p>
<div class="tooltip">Tab over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <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>
- </head>
- <body style="text-align:center;">
- <p>Tab over the text below:</p>
- <div class="tooltip">Tab over me
- <span class="tooltiptext">Tooltip text</span>
- </div>
- </body>
- </html>
Css:- The tooltips
Reviewed by Network security
on
May 23, 2019
Rating:
Reviewed by Network security
on
May 23, 2019
Rating:
No comments: