前言

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中有可能带有空格，那么也需要将空格显示出来。