qpython3h手机版 写弹窗代码_css3提示文字弹窗代码

给你的项目增加一个工具提示，不需要额外的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代码

bavotasan.com

你所需要的就是添加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

下载25个css工具提示