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