java tooltip_纯css实现漂亮又健壮的tooltip

前言

tooltip的实现有多种方式，下面是一个tooltip成长史。

预览

原始版

最简单的莫过于就用原始title属性，像这样：

button

缺点是体验是差了点，并且鼠标移上去，过一会儿才响应。

改进版

于是改进了下面这个版本

html部分

鼠标移动到这

提示文本

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部分：

鼠标移动到这

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