html中span添加tooltip,用css伪元素实现tooltip效果

以前都是用js来实现的tooltip效果，现在其实可以用css的伪元素来实现，会更简单，效果也很不错！

.tooltip a {position: relative;}

.tooltip a::before {

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid #abcdef;

position: absolute;

left: 0%;

bottom: 90%;

content: "";

height: 0;

width: 0;

opacity: 0;

margin:0 0 20px 15px;

transition: all 0.4s ease;

}

.tooltip a::after {

border-radius: 5px;

background: #abcdef;

color: #000;

position: absolute;

left: 0%;

bottom: 130%;

content: attr(data-tooltip);

white-space: nowrap;

padding: 5px 15px;

margin-bottom: 15px;

opacity: 0;

transition: all 0.4s ease;

}

.tooltip a:hover::before {bottom: 65%;}

.tooltip a:hover::after {bottom: 90%;}

.tooltip a:hover::after, .tooltip a:hover::before {opacity: 1;}

鼠标悬浮在我身上试试

如果你想将该tooltip用于显示输入框验证后错误信息也是可以的，只需要将该输入框input用span包裹，并且将所有样式都给该span即可。

新样式：

.tooltip{

position: relative;

}

.tooltip::before {

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid #abcdef;

position: absolute;

left: 0%;

bottom: 90%;

content: "";

height: 0;

width: 0;

opacity: 0;

margin: 0 0 20px 15px;

transition: all 0.4s ease;

bottom: 65%;

opacity: 1;

}

.tooltip::after {

border-radius: 5px;

background: #abcdef;

color: #000;

position: absolute;

left: 0%;

bottom: 130%;

content: attr(data-tooltip);

white-space: nowrap;

padding: 5px 15px;

margin-bottom: 15px;

opacity: 0;

transition: all 0.4s ease;

bottom: 90%;

opacity: 1;

}

html：

保底收益：

超出保底佣金率：

例子是用正则验证输入的是否为2位以内的小数，js方法：

function isoubleNum(element)//是否2位小数

{

var parent = element.parentNode;

var num = element.value;

if (num == "") {

parent.className = "tooltip"; parent.setAttribute("data-tooltip", "不填写会默认为0");

setTimeout(function () { parent.className = ""; }, 2000);

} else {

var reg = /^\d+(?:\.\d{1,2})?$/ig;

if (reg.test(num) == false) {

parent.className = "tooltip"; parent.setAttribute("data-tooltip", "应为保留2位小数内正实数");

setTimeout(function () { parent.className = ""; }, 2000);

}

else {

parent.className = "";

parent.setAttribute("data-tooltip", "");

}

}

}

var parent就是更具this找到的该输入框包裹的span。

将样式添加给改span：parent.className = "tooltip";

将要显示的验证信息传递给data-tooltip自定义属性：parent.setAttribute("data-tooltip", "应为保留2位小数内正实数");

最后用setTimeout在现实tooltip后2秒消失：setTimeout(function () { parent.className = ""; }, 2000);

该消失没加动画，你自己需要的话可以加上，嘿嘿。

效果图：

输入正确就可以不提示了：

感谢大家提的建议，如果在使用中有什么不清楚的地方可以QQ我(MajorMayer)：1414294708，大家一起学习！