<!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><a href="http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip">What is this?</a> | <a href="jTip.zip">Download This Example</a></p>
<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>
ToolLip提示效果
需积分: 9 80 浏览量
2008-10-23
23:23:46
上传
评论
收藏 56KB ZIP 举报
jTip.zip （16个子文件） 
jquery-tooltip css 
global.css 3KB yahoo.htm 287B ajax4.htm 1KB ajax3.htm 564B ajax.htm 461B images 
arrow_right.gif 102B loader.gif 958B arrow_left.gif 102B Thumbs.db 26KB
ajaxImage.jpg 17KB js jtip.js 4KB compressedjquery.js 16KB jquery.js 16KB index.htm 3KB ajax5.htm 353B ajax2.htm 1KB资源评论
