@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