CSS3 tooltips 信息提示框

mseed · 发表于 2012-4-13 11:43:14

本帖最后由 mseed 于 2012-4-13 11:45 编辑

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo - daqianduan.com</title>
<style>
body{
font:normal 12px/18px simsun;
}
.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #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: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}
/* Yellow */
.yellow-tooltip span
{
border-color: #e1ca82;
background-color: #ffeaa6;
}
.yellow-tooltip span:after
{
border-top-color: #ffeaa6;
}
.yellow-tooltip span:before
{
border-top-color: #e1ca82;
}
/* Navy */
.navy-tooltip span
{
color: #fff;
text-shadow: 0 1px 0 #000;
border-color: #161a1f;
background-color: #1e2227;
}
.navy-tooltip span:after
{
border-top-color: #1e2227;
}
.navy-tooltip span:before
{
border-top-color: #161a1f;
}
/* Blue */
.blue-tooltip span
{
border-color: #59add4;
background-color: #61bde7;
}
.blue-tooltip span:after
{
border-top-color: #61bde7;
}
.blue-tooltip span:before
{
border-top-color: #59add4;
}
/* Pink */
.pink-tooltip span
{
border-color: #ce4378;
background-color: #ea4c88;
}
.pink-tooltip span:after
{
border-top-color: #ea4c88;
}
.pink-tooltip span:before
{
border-top-color: #ce4378;
}
</style>
</head>
<body>
<h3>
Gray tooltip
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus nisi
<a class="tooltip" href="#">
vulputate
<span>
<b>
Optional title
</b>
<br>
This is a gray CSS3 tooltip.
</span>
</a>
nulla pretium egestas. Aliquam pretium eros congue
<a class="tooltip" href="#">
ultrices
<span>
This is another gray tooltip made with CSS3 only.
</span>
</a>
mauris auctor lobortis.
</p>
<h3>
Yellow tooltip
</h3>
<p>
Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque,
<a class="tooltip yellow-tooltip" href="#">
velit
<span>
<b>
Optional title
</b>
<br>
This is a yellow CSS3 tooltip.
</span>
</a>
, nibh
consequat nulla, ac laoreet
<a class="tooltip yellow-tooltip" href="#">
justo
<span>
This is another yellow tooltip made with CSS3 only.
</span>
</a>
lacus lectus ac enim.
</p>
<h3>
Navy tooltip
</h3>
Nulla volutpat mattis egestas. Integer a neque at lorem ornare
<a class="tooltip navy-tooltip" href="#">
accumsan
<span>
<b>
Optional title
</b>
<br>
This is a navy CSS3 tooltip.
</span>
</a>
quis quis ipsum.
Nam id erat mi. Etiam
<a class="tooltip navy-tooltip" href="#">
semper
<span>
This is another navy tooltip made with CSS3 only.
</span>
</a>
velit non risus ultricies faucibus.
<p>
</p>
<h3>
Blue tooltip
</h3>
<p>
Nullam tristique, eros nec feugiat bibendum, orci velit commodo
<a class="tooltip blue-tooltip" href="#">
justo
<span>
<b>
Optional title
</b>
<br>
This is a blue CSS3 tooltip.
</span>
</a>
, non ornare odio massa et ipsum.
Cras scelerisque
<a class="tooltip blue-tooltip" href="#">
ultrices
<span>
This is another blue tooltip made with CSS3 only.
</span>
</a>
leo congue laoreet.
</p>
<h3>
Pink tooltip
</h3>
<p>
Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque,
<a class="tooltip pink-tooltip" href="#">
velit
<span>
<b>
Optional title
</b>
<br>
This is a pink CSS3 tooltip.
</span>
</a>
, nibh
consequat nulla, ac laoreet
<a class="tooltip pink-tooltip" href="#">
justo
<span>
This is another pink tooltip made with CSS3 only.
</span>
</a>
lacus lectus ac enim.
</p>
<br>
<br>
</body>
</html>

复制代码

CSS3 tooltips 信息提示框纯css3 写的 tooltips 信息提示框，实用性很强，向下兼容页较好

大家看看呢？似乎还行~~~

效果预览地址：http://www.tianyizone.com/css3-tooltips-%e4%bf%a1%e6%81%af%e6%8f%90%e7%a4%ba%e6%a1%86/

		自动登录	找回密码
密码			立即注册

[教程] CSS3 tooltips 信息提示框

评分

站长推荐 /1