前言
tooltip的實現有多種方式，下面是一個tooltip成長史。
效果
原始版
最簡單的莫過于就用原始title屬性，像這樣：
<button title="tips">button</button>
缺點是體驗是差了點，并且鼠標移上去，過一會兒才響應。
改進版
于是改進了下面這個版本
html部分
<div class="btn"> <span title="提示文本">鼠標移動到這</span> <span class="tip">提示文本</span> </div>
css部分
.btn { width: 100px; position: relative; display: inline-block; background-color: gold; padding: 5px; cursor: pointer;}.btn .tip { display: none; width: 100px; background-color: black; color: #fff; text-align: center; padding: 5px 0; font-size: 12px; /* 垂直居中 */ position: absolute; top: 50%; transform: translateY(-50%); left: 118px; z-index: 1;}.btn:hover .tip { display: block;}一開始設置tip是隱藏display: none;，當鼠標移上去，將tip樣式設置為display: block;來顯示。
終極版
其實改進版一般用也夠了，但同事老爺們覺得不夠漂亮，逼格不高，沒有動畫。
無意間逛到百度云管理后臺頁面，發現了一排漂亮的tooltip，這不正是我需要的嗎？竊喜！于是研究一番，拿來即用。
html部分：
<button class="btn" tip="a bcdef">鼠標移動到這</button>
css部分：
.btn { position: relative; display: block; margin: 100px auto; padding: 10px; font-size: 14px; background: #fff; color: green; border: 1px solid green; cursor: pointer; } [tip]:after { content: attr(tip); visibility: hidden; /* 實現垂直居中 */ position: absolute; top: 50%; transform: translate(-5px, -50%); transition: all .3s; left: 100%; opacity: 0; /* 空白問題 */ white-space: pre; font-size: 16px; padding: 5px 10px; background-color: rgba(18,26,44,0.8); color: #fff; box-shadow: 1px 1px 14px rgba(0,0,0,0.1) } [tip]:hover { /* ie兼容 */ overflow: visible } .btn:hover:after { opacity: .8; transition: all .3s; transform: translate(5px, -50%); visibility: visible; display: block; }首先，在標簽中加上屬性tip，css樣式中用content: attr(tip);獲取屬性值。
默認設置tip隱藏visibility: hidden;。
用transform: translate(-5px, -50%);實現居中和偏移效果。
動畫時間設置為0.3s:transition: all .3s;。
注意：white-space: pre;是為了考慮到tip中有可能帶有空格，那么也需要將空格顯示出來。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
