Css代码

[data-tips] {
 position: relative;
 text-decoration: none;
}
 [data-tips]:after,
 [data-tips]:before {
 position: absolute;
 z-index: 100;
 opacity: 0;
 }
 [data-tips]:after {
 content: attr(data-tips);
 height: 25px;
 line-height: 25px;
 padding: 0 10px;
 font-size: 12px;
 text-align: center;
 color: #fff;
 background: #222;
 border-radius: 5px;
 text-shadow: 0 0 5px #000;
 -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
 box-shadow: 0 0 5px rgba(0,0,0,0.3);
 white-space: nowrap;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }
 [data-tips]:before {
 content: "";
 width: 0;
 height: 0;
 border-width: 6px;
 border-style: solid;
 }
 [data-tips]:hover:after,
 [data-tips]:hover:before {
 opacity: 1;
 }
/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
 -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
 bottom: 90%;
 left: -9999px;
 margin-bottom: 12px;
}
 [data-tips].top-tip:before {
 border-color: #222 transparent transparent transparent;
 margin-bottom: 0;
 }
 [data-tips].top-tip:hover:after,
 [data-tips].top-tip:hover:before {
 bottom: 100%;
 left: 0;
 }
 [data-tips].top-tip:hover:before {
 left: 15px;
 }
/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
 -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: 90%;
 left: -9999px;
 margin-top: 12px;
}
 [data-tips].bottom-tip:before {
 border-color: transparent transparent #222 transparent;
 margin-top: 0;
 }
 [data-tips].bottom-tip:hover:after,
 [data-tips].bottom-tip:hover:before {
 top: 100%;
 left: 0;
 }
 [data-tips].bottom-tip:hover:before {
 left: 15px;
 }
/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
 -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: -9999px;
 left: 96%;
 margin-left: 12px;
}
 [data-tips].right-tip:before {
 border-color: transparent #222 transparent transparent;
 margin-left: 0;
 }
 [data-tips].right-tip:hover:after,
 [data-tips].right-tip:hover:before {
 left: 100%;
 top: 0;
 }
 [data-tips].right-tip:hover:before {
 top: 7px;
 }
/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
 -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: -9999px;
 right: 96%;
 margin-right: 12px;
}
 [data-tips].left-tip:before {
 border-color: transparent transparent transparent #222;
 margin-right: 0;
 }
 [data-tips].left-tip:hover:after,
 [data-tips].left-tip:hover:before {
 right: 100%;
 top: 0;
 }
 [data-tips].left-tip:hover:before {
 top: 7px;
 }

HTML代码

<a href="http://bavotasan.com" data-tips="Go to bavotasan.com">bavotasan.com</a>

这一段代码是纯CSS和HTML不含任何JS，有兴趣的朋友可以自己动手操作一下，更多精彩请关注Gxl网其它相关文章！

相关阅读：

CSS的编码怎么转换

css3点击显示涟漪特效

怎样用canvas实现小球和鼠标的互动