15

jquery UI ツールチップを使いたい。

ツールチップでは、html にリンクが必要です。

ツールチップ内で html を操作する方法を説明するこの投稿 ( Jquery UI ツールチップは html コンテンツをサポートしていません) を見ました。

しかし、ツールチップ内にリンクを追加したい場合に問題があります。

リンクをクリックするためのツールチップを入力するためにカーソルを持ってきたとき、ツールチップが消えました（ツールチップに割り当てられた要素からマウスアウトしたためです。

私に何ができる？

ありがとう。

アップデート：

  $(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

例： http: //jsfiddle.net/jLkcs/

4

3 に答える 3

36

jQuery UI ツールチップの性質上、そのままでは使用できません。

ツールチップが閉じるのを遅らせて、リンクをクリックする時間を与えるために、いくつかのトリックを追加できます (jQuery フォーラムで見つかりましたが、リンクが失われました...)。

使用された API ドキュメント: http://api.jqueryui.com/tooltip/

コード：

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
            },    
            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});

デモ: http://jsfiddle.net/IrvinDominin/jLkcs/5/

于 2013-08-14T17:08:30.580 に答える
0

手を汚してjQueryコードを編集して、mousoutイベントでツールチップ自体にカーソルを合わせている場合に閉じないようにする必要があるようです。

または、Twitter のブートストラップ ツールチップとポップオーバーを参照することもできます。記憶から、イベント トリガー タイプをポップオーバーに渡すことができると思います。

http://getbootstrap.com/2.3.2/javascript.html#popovers

于 2013-08-14T12:13:46.320 に答える