当前位置: 代码迷 >> Web前端 >> Jquery Tip 插件施用
  详细解决方案

Jquery Tip 插件施用

热度:62   发布时间:2012-09-09 09:27:54.0
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

?

?

?

?

  相关解决方案