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