18

マウスがトリガーを離れるとすぐに消えるデフォルトのポップオーバーよりももう少し寛容になりたいボトム指向のポップオーバーがあります。

$('#example').popover({
  html: true,
  trigger: 'hover',
  container: '#example',
  placement: 'bottom',
  content: function () {
      return '<div class="box">here is some content</div>';
  }
});

マウスがトリガーまたはポップオーバー コンテンツの上にある限り、開いたままにしておく必要がありますが、トリガー要素から矢印、コンテンツまで、それらの領域を離れずにマウスで移動する必要があるため、ユーザーにとっては大変です。ポップオーバーと対話するため。2つの解決策を念頭に置いていますが、どちらも機能していません:

1) delay オプションはこれを行うべきです。ポップオーバー呼び出しに追加 delay: {hide: 500} すると、マウスが離れた後にポップオーバーが開いたままになりますが、トリガー要素またはポップオーバーが消える前に再入力すると、ポップオーバーを開いたままにするようにブートストラップに指示されないため、最初のタイムアウトの終わりに消えます。

2) 矢印を含む要素を広げて、トリガー要素とポップオーバーの間でトリガー要素から背景に移動するマウスが機能するようにします (マウスがトリガー/要素を離れることはありません)。以下は、矢印が CSS 境界線を重ねて描画されることを除いて機能するため、背景は透明ではありません: http://jsfiddle.net/HAZS8/

.popover.bottom .arrow {
    left: 0%;
    padding-left:50%;
    padding-right:50%;
}

回避策は、mouseover イベントと mouseleave イベントを jquery に固定接続するか、重なり合う境界線の矢印を画像に置き換えることです。より良い修正？

4

2 に答える 2

32

私はこれを解決するためのより一般的なアプローチを持っており、それを自分で使用しています。イベント処理とhtml5データ設定をすべて追加するのではなく、ポップオーバーの非表示機能をオーバーロードし、関連するツールチップがホバーされているかどうかを確認し、適切に反応する必要があります。 

(function($) {

    var oldHide = $.fn.popover.Constructor.prototype.hide;

    $.fn.popover.Constructor.prototype.hide = function() {
        if (this.options.trigger === "hover" && this.tip().is(":hover")) {
            var that = this;
            // try again after what would have been the delay
            setTimeout(function() {
                return that.hide.call(that, arguments);
            }, that.options.delay.hide);
            return;
        }
        oldHide.call(this, arguments);
    };

})(jQuery);

ブートストラップと jQuery ソースの後にこれをロードします。

于 2013-11-06T05:32:08.870 に答える
19

ポップオーバーのshowおよびイベントを処理できます。hide

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'bottom',
    content: function () {
        return '<div class="box">here is some content</div>';
    },
    animation: false
}).on({
    show: function (e) {
        var $this = $(this);

        // Currently hovering popover
        $this.data("hoveringPopover", true);

        // If it's still waiting to determine if it can be hovered, don't allow other handlers
        if ($this.data("waitingForPopoverTO")) {
            e.stopImmediatePropagation();
        }
    },
    hide: function (e) {
        var $this = $(this);

        // If timeout was reached, allow hide to occur
        if ($this.data("forceHidePopover")) {
            $this.data("forceHidePopover", false);
            return true;
        }

        // Prevent other `hide` handlers from executing
        e.stopImmediatePropagation();

        // Reset timeout checker
        clearTimeout($this.data("popoverTO"));

        // No longer hovering popover
        $this.data("hoveringPopover", false);

        // Flag for `show` event
        $this.data("waitingForPopoverTO", true);

        // In 1500ms, check to see if the popover is still not being hovered
        $this.data("popoverTO", setTimeout(function () {
            // If not being hovered, force the hide
            if (!$this.data("hoveringPopover")) {
                $this.data("forceHidePopover", true);
                $this.data("waitingForPopoverTO", false);
                $this.popover("hide");
            }
        }, 1500));

        // Stop default behavior
        return false;
    }
});

デモ: http://jsfiddle.net/L4Hc2/

必要な機能のポップオーバーには何も組み込まれていないように見えるので、これが私が思いついたものです:)

素晴らしいのは、実際に必要な場合 (ポップオーバーが実際に非表示または表示されている場合) にのみハンドラーの実行を許可することです。また、ポップオーバーの各インスタンスは互いに一意であるため、グローバルなトリックは行われません。

于 2013-05-24T18:29:29.923 に答える