5行JS自定义title提示效果(Tooltip)

5行JS自定义title提示效果(Tooltip)

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

HTML结构

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

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

关键的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();

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

<!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="yuexiaoliang · GitHub" deta-title>GitHub</a>
<a href="#" title="UCode.Top" 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>

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 26,569评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,350评论 1 92
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 7,239评论 0 3
  • “滴滴滴,滴滴滴”床上的人儿迷糊着眼,身子不情愿的挪动了一下,无力的手在床尾摸来摸去,终于,碰到了一个坚硬冰凉的东...
    流氓蚊阅读 297评论 8 30
  • (通讯员 路永琪)2018年7月14日,湘潭大学物理与光电工程学院赴怀化市靖州苗族侗族自治县暑期社会调研团于上...
    xtu赴靖州调研团阅读 165评论 0 0