前言

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。