<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,tips,气泡框,提示框,sharejs.com,信息框,提示信息,jQuery" />
<meta name="description" content="jQuery实现简单实用的动态信息提示框tips效果，更多tips,气泡框,提示框,信息框,sharejs.com,提示信息,jQuery请访问脚本之家JS代码频道。" />
<title>jQuery实现简单实用的动态信息提示框tips效果_脚本之家</title>
<link rel="stylesheet" href="css/jQuery.toolTip.css" media="screen" />
<link rel="stylesheet" href="css/demo.css" media="screen" />
<link rel="icon" href="../favicon.gif" />
</head>
<body>
<section id="main">
<h2>Hover on the contents to reveal the tooltip</h2>
<p>
Suspendisse imperdiet ullamcorper est at interdum.<a href="" class="tooltip" title="This is a title"> Suspendisse at felis nunc.</a> Integer eu felis lacus, id blandit augue. Mauris commodo hendrerit risus, quis vehicula mi adipiscing in. Integer nec pretium
odio. Sed ligula enim, scelerisque ut tempor lacinia, iaculis eget erat. Integer eu felis lacus, id blandit augue. Mauris commodo hendrerit risus, quis vehicula mi adipiscing in. <a href="" class="tooltip" title="Wow i did not know plugins can be this fun.">Integer nec pretium odio.</a>
Sed ligulaenim, scelerisque ut tempor lacinia, iaculis eget erat. Integer eu felis lacus, id blandit augue.
Mauris commodo hendrerit risus, <a href="" class="tooltip" title=" <img src='images/tutorial-pot.png' /> Web development tutorials and resources .">quis vehicula mi adipiscing in.</a>
Integer nec pretium odio. Sed ligula enim, scelerisque ut tempor lacinia, iaculis eget erat.
<br /><br />
Follow me on <a href="http://twitter.com/Tutorialpot/" class="tooltip" title="@Tutorialpot on twitter" >TWITTER</a>
& grab the <a href="http://feeds.feedburner.com/Tutorialpot/" class="tooltip" title="Straight to your inbox Be the first to know" >RSS FEED</a>
</p>
<img class="tooltip" title="jQuery tooltip" src="images/tutorial-pot.png" />
</section>
<footer>
<a class="orig tooltip" href="http://tutorialpot.com/2011/09/jquery-tooltip-plugin-tutorial/" title="GO BACK TO ARTICLE"> « Back to</a>
<h1><a class="tooltip" title="jQuery plugin Tutorial" href="http://tutorialpot.com/2011/09/jquery-tooltip-plugin-tutorial/">jQuery plugin Tutorial</a></h1>
</footer>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.toolTip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Apply the plugin on every tooltip selector on the page
//This piece of code can also be included from an external file
// http://www.sharejs.com
$('.tooltip').toolTip();
});
</script>
<div style="text-align:center;clear:both">
<p><script language="javascript" src="http://www.sharejs.com/js/720.js"></script></p>
<p>来源：<a href="http://www.jb51.net" target="_blank">tutorialpot</a> 代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a> 感谢：<a href="http://www.jb51.net" target="_blank">niuren</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
jQuery实现实用的动态信息提示框tips效果可用在超级链接或图片上.zip
版权申诉
57 浏览量
2022-11-07
23:58:34
上传
评论
收藏 62KB ZIP 举报
jQuery实现实用的动态信息提示框tips效果可用在超级链接或图片上.zip （8个子文件） 
132686997078466922 css 
jQuery.toolTip.css 262B demo.css 2KB images 
demo2.png 1KB tutorial-pot.png 19KB bg-footer.png 6KB
index.html 3KB js jquery-1.6.2.min.js 89KB jQuery.toolTip.js 1KB资源评论
