你的tooltip一般都是怎么寫(xiě)的呢？例如實(shí)現(xiàn)類似下圖的效果（wps word文檔 的 tooltip）：當(dāng)鼠標(biāo)移出icon的時(shí)候顯示一段工具提示文本，當(dāng)鼠標(biāo)移出工具提示文本消失。
一些小伙伴可能“不加思索”的就有想法了：父元素里包含兩個(gè)兄弟元素，其一就是這個(gè)icon，其二就是它的工具提示文本；在父元素上設(shè)置鼠標(biāo)移入、移出來(lái)實(shí)現(xiàn)交互就OK了。實(shí)例如下：
<body>
<div id="icon-box">
<i class="icon" id="icon">B</i>
<span class="text" id="text" style="display: none;">將所選內(nèi)容字體加粗</span>
</div>
</body>
<script>
var iconBox=document.getElementById("icon-box")
var text=document.getElementById("text")
iconBox.onmouseover=function(){
text.style.display="block";
}
iconBox.onmouseout=function(){
text.style.display="none";
}
</script>
ok，這樣當(dāng)然可以實(shí)現(xiàn)效果啦。不過(guò)嘛~~~在這里，icon的父元素用的是div，寬和高都沒(méi)有限制。只是對(duì)icon的大小做了限定（如下）：
.icon{
display: block;
width: 24px;
height: 24px;
line-height: 24PX;
text-align: center;
border-radius: 45%;
background-color: aqua;
font-weight: bolder;
}
然而實(shí)際情況中，icon的父級(jí)元素可能就比它大一點(diǎn)點(diǎn)，甚至是和它大小一致（如下）：
div{
width: 24px;
height: 24px;
}
這個(gè)時(shí)候，tooltip的展示效果如何呢？看看下圖吧：
吼吼吼~~~效果是不是超出預(yù)期啦？
有的小伙伴可能會(huì)說(shuō)，那也難不住我呀，給tootip設(shè)置一下樣式不就ok了。嗯，也對(duì)！如下：
.text{
width: 150px;
}
ok，這樣設(shè)置在這里確實(shí)OK了。
但是，tootip工具提示文本在實(shí)際情況中可是有長(zhǎng)有短的哦。以中文來(lái)說(shuō)，有的可能就是兩個(gè)漢字，有的可能八九個(gè)漢字，工具欄一般都有很多項(xiàng)工具按鈕，難道要一個(gè)個(gè)去設(shè)置嗎？況且現(xiàn)在都是組件化開(kāi)發(fā)了。如果以最大寬度去設(shè)置，文字長(zhǎng)度最長(zhǎng)的當(dāng)然可以容納下，那文字長(zhǎng)度短的容器內(nèi)豈不是要大片留白？這種效果恐怕自己都得尷尬死?。?/p>
還有兩點(diǎn)需要提醒一下：
1、工具提示文本的邊框也還沒(méi)有設(shè)置；
2、如果該工具按鈕上還有onclick事件，onmouseover還會(huì)和它沖突哦，但很不幸的是，實(shí)際情況中就是有onclick事件。
唉，是不是頭都要大了？一個(gè)小小的tooltip竟然搞這么大了
其實(shí)呀，html有一個(gè)全局屬性title可以幫你輕松又簡(jiǎn)單的實(shí)現(xiàn)哦
https://www.runoob.com/tags/att-global-title.html
<div id="icon-box">
<i class="icon" id="icon" title="將所選內(nèi)容字體加粗">B</i>
</div>
回頭再看之前的那些操作，是不是如此設(shè)置更簡(jiǎn)單省力！
