轻量级 css3 tooltips 信息提示框
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Html</title>
<styletype="text/css">
.tooltip{
position:relative;
/*background:#eaeaea;*/
cursor:default;
display:inline-block;
text-decoration:none;
color:#222;
outline:none;
top:100px;
left:200px;
}
.tooltipspan{
visibility:hidden;
position:absolute;
bottom:30px;
left:45%;
z-index:999;
width:100%;
margin-left:-55%;
padding:10px;
border:2pxsolid#ccc;
opacity:.9;
background-color:#ddd;
background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
-moz-border-radius:4px;
border-radius:4px;
-moz-box-shadow:01px2pxrgba(0,0,0,.4),01px0rgba(255,255,255,.5)inset;
-webkit-box-shadow:01px2pxrgba(0,0,0,.4),01px0rgba(255,255,255,.5)inset;
box-shadow:01px2pxrgba(0,0,0,.4),01px0rgba(255,255,255,.5)inset;
text-shadow:01px0rgba(255,255,255,.4);
}
.tooltip:hover{
border:0;/*IE6fix*/
}
.tooltip:hoverspan{
visibility:visible;
}
.tooltipspan:before,.tooltipspan:after{
content:"";
position:absolute;
z-index:1000;
bottom:-7px;
left:50%;
margin-left:-8px;
border-top:8pxsolid#ddd;
border-left:8pxsolidtransparent;
border-right:8pxsolidtransparent;
border-bottom:0;
}
.tooltipspan:before{
border-top-color:#ccc;
bottom:-8px;
}
.tooltipspan:after{
border-top-color:#ccc;
bottom:-8px;
}
</style>
</head>
<body>
<divclass="tooltip">这是我的文字<span>这是我的说明描述文字。</span></div>
</body>
</html>