一、基础提示框(Tooltip)
<body style="text-align:center"> <div class="tooltip">鼠标移动到这 <span class="tooltiptext">提示文本</span> </div> </body>
<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: absolute; z-index: 1; /* 属性指定一个元素的堆叠顺序。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */ } .tooltip:hover .tooltiptext{ visibility: visible; } </style>
.tooltip .tooltiptext{ /* 可以通过用top 属性把这个文章居中，然后通过right属性把文章变到左边 因为默认的时候是放在右边的 */ top: -5px; right: 105%; }
二、头部提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tooltip{
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext{
visibility: hidden;
120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* 这里是left就是为了在上面的时候可以前面边界居中
margin-left就是为了让整体居中
bottom就是为了可以放在上面
也可以通过设置top：100%让他放在下面的 */
}
.tooltip:hover .tooltiptext{
visibility: visible;
}
</style>
</head>
<body style="text-align: center;">
<p> 23333332</p>
<p> 23333332</p>
<p> 23333332</p>
<div class="tooltip">
鼠标移动到我这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* 这里是left就是为了在上面的时候可以前面边界居中 margin-left就是为了让整体居中 bottom就是为了可以放在上面 也可以通过设置top：100%让他放在下面的 */ } .tooltip:hover .tooltiptext{ visibility: visible; } .tooltip .tooltiptext::after{ /* :after 选择器向选定的元素之后插入内容。 */ /* 通过content来插入内容的 absolute就是为了接着提示框的后面，但是为了可以放在 提示款的底部中间的话，通过top和left还有margin-left的配合 因为这个是没有内容的，全部是通过边框来构成的，所以border-width和margin-left是同样的 通过设置color 其实就是一个正方向，正面的部分是黑色的 下面左边右边都是透明的，就可以变成箭头的样式了 */ content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } </style> </head> <body style="text-align: center;"> <p> 23333332</p> <p> 23333332</p> <p> 23333332</p> <div class="tooltip"> 鼠标移动到我这 <span class="tooltiptext">提示文本</span> </div> </body> </html>
淡入提示框的效果，呈现出，慢慢变深的效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <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: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* 淡入 - 1秒内从 0% 到 100% 显示: */ opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> <body style="text-align:center;"> <h2>提示工具淡入效果</h2> <p>鼠标移动到以下元素，提示工具会再一秒内从 0% 到 100% 完全显示。</p> <div class="tooltip">鼠标移动到我这 <span class="tooltiptext">提示文本</span> </div> </body> </html>