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的值放到里边。
<a href="#" title="漠白 · GitLab" deta-title>GitLab</a>
关键的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();
到这里，关键性的代码就完成了，剩下的如果想自己添加特殊效果就看你自己的了，下边是我最终的代码：
<!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>
网友评论