0

チップチップを実装したところ、使用するのが素晴らしいことがわかりました。ここで、フォームを作成し、それをチップチップツールチップで使用して、ユーザーがフォームに入力して送信できるようにします。

私はチップチップを次のように作成しました

  $('.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>
4

1 に答える 1

1

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

"keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it."

Try adding this property and set it to true

Update:

Example here: http://jsbin.com/imeqes/2/

Appears to work fine when you hover over image, then hover over tip, it stays there.

于 2013-02-16T10:34:37.823 に答える