用css伪元素实现tooltip效果

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

鼠标悬浮在我身上试试

如果你想将该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，大家一起学习！