<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jTip - The Jquery Tool Tip</title>
<style type="text/css" media="all">
@import "css/global.css";
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jtip.js" type="text/javascript"></script>
</head>
<body>
<div id="contentPad">
<p><strong>Roll over a question mark:</strong></p>
<label style="padding-right:5px">Password</label><input name="" type="text" /><span class="formInfo"><a href="ajax.htm?width=375" class="jTip" id="one" name="Password must follow these rules:">?</a></span>
<br />
<br />
<label style="padding-right:5px">User ID</label><input name="" type="text" /><span class="formInfo"><a href="ajax2.htm?width=475" class="jTip" id="two" name="">?</a></span>
<p><strong>Try adjusting the browser window so the links in the paragraphs below are as close to the right side of the window as possible. Roll over a link in the paragraphs below. This demonstrates how the tool tip will flip horizontally depending upon the space between the tool tip and the right side of the window. Don't worry the script also accounts for the custom widths.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut <a href="ajax4.htm?width=475" class="jTip" id="six" name="Window caption or title">Tip With Caption</a> enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu <a href="ajax3.htm?width=375" class="jTip" id="three">Tip No Caption</a> feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <a href="ajax5.htm" class="jTip" id="four" name="Window caption or title">No Specified Width</a> et dolore magna aliquam erat volutpat.</p>
<p><strong>The link below demonstrates a tool tip on a text link that allows for the link to accommodate an additional URL (using a query string). So that a link will functions as expect if clicked. Notice the cursor change.</strong></p>
<p><a href="yahoo.htm?width=175&link=http://www.yahoo.com" name="Before You Click..." id="yahooCopy" class="jTip">Go To Yahoo</a></p>
</div>
</body>
</html>
2010090155018037.rar （15个子文件） 
文字弹出层提示的效果 css 
global.css 3KB images 
loader.gif 958B
ajaxImage.jpg 17KB arrow_left.gif 102B arrow_right.gif 102B ajax3.htm 564B yahoo.htm 287B ajax5.htm 353B ajax4.htm 1KB js jquery.js 16KB jtip.js 4KB compressedjquery.js 16KB index.htm 3KB ajax.htm 461B ajax2.htm 1KB资源评论
StainlessPtr2013-05-14非常实用，已经用到工作中去了，谢谢楼主分享！
lvyananasnow2013-03-19很好，可以使用
