A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:
<!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;">
<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>
</body>
</html>
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text.
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext".
CSS: The tooltip class use position:relative, which is needed to position the tooltip text (position:absolute). Note: See examples below on how to position the tooltip.
The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover (see below). We have also added some basic styles to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.
The CSS border-radius property is used to add rounded corners to the tooltip text.
The :hover selector is used to show the tooltip text when the user moves the mouse over the <div> with class="tooltip".
In this example, the tooltip is placed to the right (left:105%) of the "hoverable" text (
). Also note that top:-5px is used to place it in the middle of its container element. We use the number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the top property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.Right Tooltip
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Left Tooltip
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
https://www.w3schools.com/css/css_tooltip.asp?goalId=721551e7-cf56-49ab-b572-83f2b5f8ee95
标签：text,top,Tooltip,tooltip,5px,position,CSS,tooltiptext From： https://www.cnblogs.com/zhongta/p/18687320