css3提示文字弹窗代码

原文链接：http://caibaojian.com/css3-tooltip.html

给你的项目增加一个工具提示，不需要额外的javascript代码，你可以通过使用css3样式来创建一个类似的效果。

css3 提示只适用于高级浏览器：·

• Chrome
• Firefox
• Safari
• IE9+

css代码

/** * CSS3 Tips * * A stylesheet for creating tooltips without using anything other than CSS3. * * created by c.bavota * released under GPL v2 * * November 6th, 2013 */[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;}

一旦你添加了上面的css3代码之后，你就可以创建你的工具提示了

HTML代码

//code from http://caibaojian.com/css3-tooltip.html<a href="http://bavotasan.com" class="top-tip" data-tips="Go to bavotasan.com">bavotasan.com</a>

你所需要的就是添加data-tip=""参数到任何你需要的HTML元素，同时设置工具提示的方面的class.

Examples

caibaojian.com

Different Directions

In order to make a tooltip appear in a different direction you need to use one of four classes:

• top-tip
• bottom-tip
• left-tip
• right-tip

A tooltip on top   A tooltip on the bottom   A left tooltip   A right tooltip