html 自定义title,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

先给父元素，也就是我们要自定义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();

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

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

漠白的Tooltip

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;

}

GitLab

GitHub

博客

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();