Jquery Tip 插件施用 _Web前端

Jquery Tip 插件使用

@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