CSS 提示工具(Tooltip)
本文为大家介绍如何使用HTML和CSS来实现提示工具，
提示工具在鼠标移动到制定元素后触发,先看下面示例：
1.基础提示工具代码如下：
<!doctye html>
<html>
<head>
<meta charset="utf-8"/>
<title>右提示工具</title>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
padding-top:50px;
}
.tooltip{
display:inline-block;
position:relative;
}
.btn{
display:block;
padding:20px;
background:#f0f;
color:white;
}
.bottom{
position:relative;
background:#aaa;
width:160px;
position:absolute;
left:110%;
top:10%;
text-align:left;
padding:12px;
opacity:0;
transition:1s;
color:white;
border-radius:10px;
}
.tooltip:hover .bottom{
opacity:1;
}
.bottom:after{
content:"";
border:5px solid;
border-color:transparent #aaa transparent transparent ;
position:absolute;
left:-10px;
margin-top:5px;
}
</style>
</head>
<body>
<div class="tooltip">
<span class="btn">右提示工具</span>
<div class="bottom">
提示工具
</div>
</div>
</body>
</html>运行结果如下图：
2.添加箭头
我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}3.技术要点：
- 父元素相对定位
- 提示框绝对定位
- 箭头绝对定位
- 淡入效果（我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果）