几行 JS 的 title 提示效果 - Jdeal

大家知道通过::after 或者::before 的 content:attr()可以取到父元素的属性，然后通过一系列的 css 就可以让这个伪元素显示到页面上。

但如果使用这个来实现 title 的 Tooltip 的话，你会发现虽然你自定义的样式可以弹出来，但是浏览器默认的 Tooltip 也会弹出来。

也许这时候你会想到可以通过一个自定义属性来完成，但是当你自定义属性的时候，你还应该想想，这么做是否有利于你网站的 SEO，其实如果想两者兼得的话很简单，利用寥寥几行的 JS 就可以实现了，下边附上我的实现过程：

先看效果如下：

第一步先给自定义 tooltip 的节点添加 deta-title 自定义属性，这时候 deta-title 是空的，后边通过 js 把 title 的值放到里边。

<a href="#" title="GitLab" deta-title>GitLab</a>

然后给父元素，也就是我们要自定义 toolpit 的元素添加一个相对定位。

设置伪元素 content: attr()的值为 deta-titlecontent: attr(deta-title)，取到父元素 deta-title 的值。

同时伪元素设置绝对定位来调整一下位置，伪元素设置 white-space:nowrap 使其内容不换行。

隐藏伪元素，如果你想添加一些动画效果的话，使用 visibility:hidden 来隐藏，如果不需要动画效果的话，可以直接使用 display:none。

最后父元素添加:hover 来控制伪元素显示。

完整 css 代码如下:

[deta-title]{
    position: relative;
}
[deta-title]:after{
    content: attr(deta-title);
    position: absolute;
    left: 0;
    bottom: 100%;
    white-space: nowrap;
    visibility: hidden;
}
[deta-title]:hover:after{
    visibility: visible;
}

接下来就是几行 JS，查找所有拥有 deta-title 属性的节点。

遍历所有的 deta_title，把 title 的值赋给 deta_title，删除 title 属性。

完整的 js 如下：

function detaTitle(){
    var deta_title = document.querySelectorAll("[deta-title]");
    for (var i = 0; i < deta_title.length; i++){
        deta_title[i].setAttribute("deta-title",deta_title[i].getAttribute("title"));
        deta_title[i].removeAttribute("title");
    }
}
detaTitle();

到这里，关键性的代码就完成了，剩下的如果想自己添加特殊效果就看你自己的了。

最后放出我最终的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tooltip</title>
    <style>
        body{
            background-color: #ccc;
            text-align: center;
            padding-top: 200px;
        }
        a{
            text-decoration: none;
            color: #555;
        }
        [deta-title]{
            position: relative;
            margin: 0 20px;
        }
        [deta-title]:after{
            content: attr(deta-title);
            position: absolute;
            left: 50%;
            bottom: 100%;
            transform: translate(-50%,0);
            color: #fff;
            text-shadow: 0 -1px 0px black;
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
            background: #383838;
            border-radius: 2px;
            padding: 3px 10px;
            font-size: 12px;
            white-space: nowrap;
            transition:all .3s;
            opacity: 0;
            visibility: hidden;
        }
        [deta-title]:hover:after{
            transition-delay: 100ms;
            visibility: visible;
            transform: translate(-50%,-6px);
            opacity: 1;
        }
    </style>
</head>
<body>
<a href="#" title="GitLab" deta-title>GitLab</a>
<a href="#" title="GitHub" deta-title>GitHub</a>
<a href="#" title="博客" deta-title>博客</a>

<script>
function detaTitle(){
    var deta_title = document.querySelectorAll("[deta-title]");
    for (var i = 0; i < deta_title.length; i++){
        deta_title[i].setAttribute("deta-title",deta_title[i].getAttribute("title"));
        deta_title[i].removeAttribute("title");
    }
}
detaTitle();
</script>
</body>
</html>

来源：岳晓亮小哥哥