web-dev-qa-db-ja.com

リンク付きのjqueryUIツールチップhtml

JqueryUIツールチップを使用したい。

ツールチップに、htmlにリンクがあることを望みます。

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

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

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

私に何ができる？

ありがとう。

更新：

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

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

jqueryjquery-uitooltip
14
Nir

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/

33
Irvin Dominin

Irvin Domininの受け入れられた答えは、これに関して私にとって大きな助けになりました。誰かが私が持っていたのと同じ追加の要件を持っているなら、私はそれを拡張しました。

また、ツールチップの表示を遅らせたいと思いました。 「show」オプションがnullに設定されていたため、複製する必要がありました。 （showオプションはnullに設定されており、マウスがツールチップから呼び出し元のリンクに戻ったときにポップアップが視覚的に再描画されるのを停止します）。

開発中のページには多くのユーザーツールチップがあり、ページ全体をマウスで移動するとインスタント表示が少し不快だったため、遅延を設ける必要がありました。

私の解決策は、openイベントを使用してツールチップを非表示にし、タイムアウトを追加してから再度表示することでした。これの例外は、同じツールチップがすでに開いている場合で、これを並べ替えるために、要素を開いたり閉じたりするときに各要素にtrue/falseデータ属性を追加しました（open関数とclose関数からソース要素を取得するのは簡単ではありませんでしたが、私はそれが正しいと思います）。

免責事項：私はJQueryのマスターではありません。これを複製するための、はるかに簡単な方法があるかもしれません。私は時々コードでうさぎの穴に行き詰まるので、以下のコードは悪いアドバイスかもしれません...

var ttWait; // global variable for tooltip delay
$(document).tooltip({
    items: '.userSummaryLink',
    show: null,
    content: function() {  // build the popup content
        return $(this).prop('title');
    },
    open: function (event, ui) { // simulating the show option (that needs to be null to stop the popup closing and reopening when user mouses from popup back to source
        var el = $(event.originalEvent.target);
        if( !el.data('tooltip') ) { // only put open delay if SAME popup not already open
            ui.tooltip.hide(); // stop popup opening immediately
            ttWait = setTimeout(function() { // show popup after delay
                el.data("tooltip", true); // acknowledge popup open
                ui.tooltip.fadeIn("400");
            }, 250);
        }
    },
    close: function (event, ui) {
        var el =  $(event.originalEvent.target);
        el.data("tooltip", false); // acknowledge popup closed (might be over-ridden below)
        clearTimeout(ttWait); // stop tooltip delay function
        ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
                el.data("tooltip", true); // acknowledge popup still open
            },

            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                });
            });
    }
});

また、ポップアップにいくつかのクラスと配置を追加して、呼び出し元のリンクに矢印を付けることに注意してください。さらに、私のコンテンツは、ページにロードされたユーザーオブジェクトファイルから派生しました。うまくいけば使いやすくするために、これらを削除しました。

0
Simon Russell

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

または、別の方法として、Twitter bootstrapツールチップとポップオーバーを見ることができます。メモリから、イベントトリガータイプをポップオーバーに渡すことができると思います。

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

0
ScottGuymer