@author liuqing
?1. 使用方法
?
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Hello World</title> </head> <link rel="stylesheet" type="text/css" href="jquery.qtip.min.css" /> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery.qtip.min.js"></script> <script type="text/javascript" src="qtip.js"></script> <body> <span title="这是用于添加用户">用户信息</span> <table border="1"> <tr> <td title="我们是中国请检查您的互联网连接状况,重新启动您可能正在使用的任何路由器、调制解调器以及其他网络设备。人">555555555555555555555555555</td> </tr> </table> </body> </html>
?
2. javascript 封装
?
$(document).ready(function() { // Match all <A/> links with a title tag and use it as the content (default). $('td[title]').qtip(); $('span[title]').qtip(); });
?
3. 修改显示对齐方式
?
?
$(document).ready(function() { // Match all <A/> links with a title tag and use it as the content (default). $('td[title]').qtip({position:{at:'bottom left'}}); $('tr[title]').qtip({position:{at:'bottom center'}}); $('span[title]').qtip({position:{at:'bottom left'}}); });?
?
?
?
4.显示结果
?
?
5. demo
?
?
?
?