jquery qtip demo

来源：互联网发布：编程大括号编辑：程序博客网时间：2024/06/14 00:38

qtip demo html

-----------------

<html>
<head>
<title>qtip demo</title>

</head>

<body>
<a href="javascript:void(0);" id="a0">test div0</a> <br /><br /><br />
<a href="javascript:void(0);" id="a1">test div</a> <br /><br /><br />
<div id="a2" style="width:100px;border: 1px solid;background: yellow;">test div2</div> <br />
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(function(){
   $('#a0').qtip({
       content: 'This is an active list element',
       show: 'mouseover',
       hide: 'mouseout'
   });

   $('#a1').qtip({
       content: 'This is an active list element',
       show: {
           when:'click',
           solo:false
       },
       hide: {
           when: 'inactive',
           delay: 1000
       }
   });

   $('#a2').qtip({
       content: '姓名:<input id="uname" type="text"><br /><br /><input type="button" value="提交" onclick="submitTip()"><input type="button" value="关闭" onclick="colseTip()">',
       show: {
           when:'dblclick',
           solo:false
       },
       hide: {
           when: 'inactive',
           delay: 2000
       }
   });
});
function colseTip(){
   $("#a2").qtip("hide");
}
function submitTip(){
   alert("提交");
}
</script>
</body>
</html>

qtip更新内容：

$('#a2').qtip("api").updateContent("dddddd");