2013-02-16 82 views
0

我剛剛實施tiptip,發現它很棒。現在我想製作一個表單並將其用在tiptip工具提示中,以便用戶可以填寫並提交它。在Tiptip中創建並提交表單

我已經創建tiptip作爲

$('.div').tipTip({ 
    maxWidth: 1000, 
    defaultPosition: 'right', 
    content: function (e) { 
     $.ajax({ 
     url: 'tets.php', 
     datatype: JSON, 
     success: function (response) { 
     $('#tiptip_content').html(response); 
     $('body').append(response).fadeIn('1000');// the var e is the callback function data (see above) 
     } 
     }); 
     return 'Please wait...'; // We temporary show a Please wait text until the ajax success callback is called. 
    } 
    }); 

我得到我提示的形式。現在,只要我把鼠標放在裏面,它就會消失(顯然,它是最後的工具提示)。有什麼辦法做我想要實現的?

我的HTML

<div class="div">Hover on Me</div> 

tets.php

<form id = "testForm" method="post" action="newEmptyPHP.php"> 
    <table width="400" border="0" align="center" cellpadding="5" cellspacing="0"> 
    <tr> 
     <td width="150">Username</td> 
     <td width="250"><input name="username" type="text" class="textfield" /></td> 
    </tr> 
    <tr> 
     <td>Password</td> 
     <td><input name="password" type="password" class="textfield" /></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td><input name="remember" type="checkbox" value="d"> Remember me</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td><input type="submit" name="login" value="Login" /></td> 
    </tr> 
    </table> 
</form> 
+0

你可以做一個[小提琴](http://jsfiddle.net)並解釋你的問題? – 2013-02-16 10:24:37

+0

我看不到任何'

'there – Alexander 2013-02-16 10:30:15

+0

如何包含我下載的外部js庫?還有我用來處理AJAX請求的其他php文件? – 2013-02-16 10:30:31

回答

1

http://code.drewwilson.com/entry/tiptip-jquery-plugin

「的keepAlive:假(假默認情況下)如此 - 當設置爲true TipTip只會淡出時您將鼠標懸停在實際的TipTip上,然後將鼠標懸停在其上。「

嘗試添加此屬性並將其設置爲true

更新:

這裏舉例:http://jsbin.com/imeqes/2/

出現,當你將鼠標懸停在圖片做工精細,然後將鼠標懸停提示,它保持那裏。

+0

當我使用它,它刪除窗體和工具提示,只剩下一個箭頭 – 2013-02-16 10:37:36

+0

嗯..我已經更新了我的答案與一個工作的例子。這可能是阿賈克斯導致它失敗。 – 2013-02-16 11:14:43

+0

工作正常......謝謝。 – 2013-02-16 11:19:02

相關問題