鼠标滑过文字链接时会弹出一个气泡提示框，取代文本链接的title提示信息，很酷哟
查看演示页面 View Demo 查看全部代码 View Code
下载脚本程序
点击这里下载全部程序代码及演示图片
在网页<head>区添加如下代码
<style type="text/css">
body{
background-image:url('http://www.sharejs.com/images/logo.gif');
background-repeat:no-repeat;
padding-top:85px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.9em;
line-height:130%;
}
a{
color: #D60808;
text-decoration:none;
}
a:hover{
border-bottom:1px dotted #317082;
color: #307082;
}
</style>
<link rel="stylesheet" href="css/bubble-tooltip.css" media="screen">
<script type="text/javascript" src="js/bubble-tooltip.js"></script>
在网页<body>区添加以下代码
<div id="bubble_tooltip"> <div class="bubble_top"><span></span></div> <div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div> <div class="bubble_bottom"></div> </div> <h1>DHTML Balloon tooltip</h1> <p>This demo demonstrates how the balloon tooltip works. Roll your mouse over the red links in the text below.</p> <p><a href="#" onmouseover="showToolTip(event,'This is a simple, simple test');return false" onmouseout="hideToolTip()">Roll over me</a> to see the tooltip in action.</p> <p>And here's some more content <a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip. This is the content of the tooltip.');return false" onmouseout="hideToolTip()">Roll over me</a> </p> <p>This is the last piece of the content on this web page</p>
代码调用方法
添加一个链接代码，如下
<a href="#" onmousemove="showToolTip(event,'This is a simple, simple test');return false" onmouseout="hideToolTip()">sharejs.com</a>
你也可以不使用链接文本，使用span标签也可以达到同样的效果 如:
<span class="tooltip_text" href="#" onmousemove="showToolTip(event,'This is a simple, simple test');return false" onmouseout="hideToolTip()">sharejs.com</span>
下载图片：
There are 3 images used in this script. You can download them from this zip file. They should be placed in a subfolder called "images".
