5行JS自定义title提示效果（Tooltip）

5行JS自定义title提示效果（Tooltip）

预览地址： 5行JS自定义title提示效果（Tooltip）
如果你对 css有一定研究的话，那你肯定知道通过 ::after或者是 ::before的 content: attr()可以取到父元素的属性，然后通过一系列的 css就可以让这个伪元素显示到页面上。但是如果单单使用这个来实现 title的 Tooltip的话，你会发现虽然你自定义的样式可以弹出来，但是浏览器默认的 Tooltip也会弹出来，这肯定不是想要的结果。也许这时候你会想到可以通过一个自定义属性来完成，但是当你自定义属性的时候，你还应该想想，这么做是否有利于你网站的 SEO，其实如果想两者兼得的话很简单，利用寥寥几行的JS就可以实现了，下边附上我的实现过程。

HTML结构

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

GitLab

关键的CSS

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

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

3. 伪元素设置绝对定位来调整一下位置

4. 伪元素设置white-space: nowrap使其内容不换行。

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

6. 父元素添加: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

1. 查找所有拥有deta-title属性的节点。

2. 遍历所有的deta_title。

3. 把title的值赋给deta_title。

4. 删除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();

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

    
    
    
    
    


GitLab
GitHub
博客