jquery qtip demo

向右看齐 2021-11-01 15:48 489阅读 0赞

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="提交" οnclick="submitTip()"><input type="button" value="关闭" οnclick="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");