史上最簡單CSS實現Tooltip文字提示！
先打個底子，配上滑鼠箭頭變小手：
<div class="box">
<a class="tooltip" data-msg="崔永元">李冰冰恨誰</a>
</div>
.box {
width: 800px;
text-align: center;
margin: 50px auto;
}
.tooltip {
position: relative;
font-size: 14px;
cursor: pointer;
}
接下來寫tooltip被觸發彈出的內容，由於一個a標籤搞定，所以我們用::before 的attr()方法取到a標籤里data-msg屬性值：
.tooltip::before {
word-break: keep-all;
white-space: nowrap;
content: attr(data-msg);
position: absolute;
padding: 2px 6px;
display: block;
color: #333;
border: 1px solid #333;
border-radius: 5px;
font-size: 14px;
line-height：20px;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
似乎有個雛形了，但是還不夠，一般提示框會有一個向下凸起的角，我這裡直接用特殊字元「﹀」，不過還是為了兼顧極簡的原則，我不打算把﹀寫在一個span標籤里，繼續用CSS選擇器，::before已經使用了，再用before會覆蓋崔大爺，就剩「::after」了，拿來吧：
.tooltip::after {
content: "﹀";
position: absolute;
top: -8px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: #fff;
height: 7px;
line-height: 13px;
}
看到那個向下的凸起了吧！是不是有點感覺了？
最後呢，由於提示框是滑鼠箭頭懸停觸發的，所以hover偽類come on吧，一行代碼不用加，只需把:hover插入到.tooltip和::after / ::before中間就好啦，意思是滑鼠懸停的時候才顯示崔大爺：
區區幾行代碼而已，再也不用找tooltip的庫了！
完成代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width_=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 800px;
text-align: center;
margin: 50px auto;
}
.tooltip {
position: relative;
font-size: 14px;
cursor: pointer;
}
.tooltip:hover::before {
word-break: keep-all;
white-space: nowrap;
content: attr(data-msg);
position: absolute;
padding: 2px 6px;
display: block;
color: #333;
border: 1px solid #333;
border-radius: 5px;
font-size: 14px;
line-height：20px;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
.tooltip:hover::after {
content: "﹀";
position: absolute;
top: -8px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background: #fff;
height: 7px;
line-height: 13px;
}
</style>
</head>
<body>
<div class="box">
<a class="tooltip " data-msg="崔永元">李冰冰恨誰</a>
</div>
</body>
</html>
推薦閱讀：