前言

tooltip的實現有多種方式，下面是一個tooltip成長史。

預覽

https://codepen.io/moddx/pen/...

原始版

最簡單的莫過于就用原始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中有可能帶有空格，那么也需要將空格顯示出來。

總結

以上是生活随笔為你收集整理的纯css实现漂亮又健壮的tooltip的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。