最近项目中遇到一个需求，鼠标移到某区域时，会有悬浮的层出现提示信息。
找了一个jquery的插件。能实现这样的功能，实现非常之简单，就不多了，直接看代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<style type="text/css">
body
{
margin: 0;
padding: 0;
font: normal 12px Verdana, Geneva, sans-serif;
line-height: 1.8em;
color: #333;
}
*
{
outline: none;
}
img
{
border: none;
}
h1
{
font: 4em normal Georgia, 'Times New Roman' , Times, serif;
padding: 10px 0;
color: #aaa;
text-align: center;
}
h1 span
{
color: #666;
}
h1 small
{
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 0.65em;
display: block;
color: #666;
}
h1 a
{
text-decoration: none;
}
a
{
color: #d60000;
text-decoration: none;
}
/*--Tooltip Styles--*/.tip
{
color: #fff;
background: #cccccc;
display: none; /*--Hides by default--*/
padding: 5px;
position: absolute;
120px;
z-index: 1000; /*-webkit-border-radius: 3px;
-moz-border-radius: 3px; border-radius: 3px;*/
}
.container
{
960px;
margin: 0 auto;
overflow: hidden;
font-weight: bold;
}
.tddefaultstyle
{
color: #2F6E8B;
font-weight: bold;
height: 30px;
font-size: 12px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
var tip = $(this).find('.tip');
$(".tip_trigger").hover(function() {
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
//alert(e.pageX + "---" + e.pageY);
var mousex = e.pageX - 10; // +20; //Get X coodrinates
var mousey = e.pageY + 10; // +20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth; //mousex = e.pageX - tipWidth - 20;
} if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight; //mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
</script>
</head>
<body>
<div class="container">
<h1>
<span>Simple Tooltips</span> w/ CSS & jQuery <small>Tutorial by Soh Tanaka | <a
href="http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/">Visit Tutorial</a></small></h1>
<a href="http://www.designbombs.com/design-firm/struck-axiom/" target="_blank" class="tip_trigger"
style="float: left; margin: 5px 20px 20px 0; padding: 10px; border: 1px dashed #ddd;">
<img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/struckaxiom_thumb.gif"
alt="" />
<span class="tip">
<img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/struckaxiom.gif"
alt="" /></span> </a>
<p>
Ut dolus ullamcorper, gravis ad eu typicus. Similis nulla augue aliquam importunus
eu, dolor erat letalis persto. Autem qui, vel patria elit refero si. Letalis augue
accumsan vulputate aptent vel aptent iusto ullamcorper vero. delenit hos dolore
occuro tation euismod eum quadrum si nulla saepius nutus wisi foras. Commodo <a class="tip_trigger"
href="http://www.designbombs.com/design-firm/grandpeople/">Paulatim <span class="tip"
style=" 400px;">
<img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/grandpeople_thumb.gif"
style="float: left; margin-right: 20px;" alt="" />Welcome to Grandpeople. We
specialize in graphic design, photography, illustration and creative direction.
Feel free to have a look at our selected work for clients and collaborators from
around the globe.</span></a></p>
<p>
Jumentum in, premo pertineo valde mara velit haero ulciscor abigo commodo vulputate
volutpat. In typicus luptatum, nutus, ne letalis vel ventosus. Hendrerit <a class="tip_trigger"
href="http://www.designbombs.com/design-firm/amaze-labs/">aliquam <span class="tip"
style=" 450px;">
<img src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/amazeelabs_thumb.gif"
style="float: left; margin-right: 20px;" alt="" />
We build fresh websites and amazing community solutions. Amazee Labs at your service!
Based on the modern open source framework Drupal we bring your brand to the online
world. With competence, confidence and a dash of spice! </span></a>eros
eum eu laoreet, minim, probo. Duis nibh in huic abico duis enim oppeto.
</p>
<p>
Jumentum in, premo pertineo valde mara velit haero ulciscor abigo commodo vulputate
volutpat. In typicus luptatum, nutus, ne letalis vel ventosus. Hendrerit aliquam
eros eum eu laoreet, minim, probo. Duis nibh in huic abico duis enim oppeto. <a href="#"
class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a></p>
</div>
<table>
<tr>
<td class="tip_trigger">
asldjflasdjf <span class="tip">6月份已生成报告</span>
</td>
<td>
asldjflasdjf <span class="tip">This will show up in the tooltip</span>
</td>
<td style="height: 30px" class="asdfas">
<a href="" class="tddefaultstyle">asldjflasdjf</a>
</td>
<td>
asldjflasdjf
</td>
<td>
asldjflasdjf
</td>
</tr>
</table>
</body>
</html>
运行效果图：
当然你也可以将那个提示框改成div在改改样式什么的，加个背景图片，这个就要自由发挥了，这里的例子只是提供了这功能，你可以根据自己的需要，做修改。
其实它的实现就是在将提示信息放到一个<span>中，再用jquery类库里的方法来控制。那段js估计有点基础的也能看的懂。好了，希望对有这样的需求的朋友能有点帮助。哦是的。还是把这个例子的官网贴出来，我也没深入的研究，纯英文的，哥们英语不咋滴，嘿嘿！有需要的哥们可以去看看
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/