纯CSS 实现tooltip 内容提示信息效果
浏览数：34 /
时间：2015年06月09日
Tooltip 也就是内容的提示信息，合理使用可以给用户比较好的体验。
实现方法有很多种，有很多JS 插件，我这里介绍的是纯CSS实现的方法，兼容性也比较靠谱,IE8+均可正常显示。实现方法也非常简单。
html结构
<a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress Theme Pivot</a> 可以看到关键有2点，意识有 css-tooltip 标签，二是用 data-tooltip 保存提示信息。
css代码
.css-tooltip{position:relative}
.css-tooltip:after{background-color:rgba(0,0,0,0.8);border-radius:3px;bottom:30px;color:#fff;content:attr(data-tooltip);display:none;font-size:12px;left:50%;line-height:1.3;padding:5px;position:absolute;text-align:center;width:160px;margin-left:-85px}
.css-tooltip:before{content:"";border:4px transparent solid;border-top-color:rgba(0,0,0,0.8);position:absolute;bottom:22px;left:50%;display:none;margin-left:-4px}
.css-tooltip:hover:after,.css-tooltip:hover:before{display:block}
PS
- 也可以使用
.xxxx[data-tooltip]这种选择器。 - 尽量不要和
title标签同时使用，会比较不美观。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
