<!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>
<!--
底岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩弧
岱 埭 鎢 乾 疑 氪 岱
怪岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩戕
岱 岱
岱 枑鼎埭鎢楷票迵狟婥 岱
岱 岱
岱 http://www.codefans.net 岱
岱 岱
岱 誑翑﹜煦砅﹜枑詢 岱
彿岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩忽
-->
<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>
jQuery 鼠标滑过链接文字弹出层提示的效果
5星 · 超过95%的资源 需积分: 10 104 浏览量
2009-06-19
07:45:25
上传
评论 2
收藏 39KB RAR 举报 
jquery-tooltip.rar （15个子文件） 
codefans.net 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
ajaxImage.jpg 17KB js jtip.js 4KB compressedjquery.js 16KB jquery.js 16KB index.htm 3KB ajax5.htm 353B ajax2.htm 1KB
- 1
- 2
前往页