html一段文字弹窗提示代码,css3提示文字弹窗代码

不需要额外的javascript代码，你可以通过使用css3样式来创建一个类似的效果。

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代码

bavotasan.com