196

Bootstrapのポップオーバーを使用してWebサイトを構築していますが、クリックではなくホバーにポップオーバーを表示する方法がわかりません。

私がやりたいのは、誰かがリンクをクリックする代わりにリンクにカーソルを合わせるとポップオーバーが表示され、離れるとポップオーバーが消えるようにすることだけです。ドキュメントには、data属性またはjqueryのいずれかを使用できると記載されています。私は複数のポップオーバーを持っているので、jqueryでそれをやりたいと思います。

4

5 に答える 5

397

triggerポップオーバーのオプションを、デフォルトhoverのの代わりにに設定します。click

data-*これは、マークアップのいずれかの属性を使用して実行できます。

<a id="popover" data-trigger="hover">Popover</a>

または初期化オプションを使用する場合：

$("#popover").popover({ trigger: "hover" });

これがデモです。

于 2012-09-09T23:03:46.283 に答える
34

アクセシビリティのためにそれを追加したいのですが、フォーカストリガーを追加する必要があると思います：

すなわち$("#popover").popover({ trigger: "hover focus" });

于 2013-02-22T16:26:17.433 に答える
18

ポップオーバー自体もホバーしたい場合は、手動トリガーを使用する必要があります。

これは私が思いついたものです：

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(_this).is(':hover')) // change $(this) to $(_this) 
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}
于 2014-04-09T07:50:05.240 に答える
6

説明した機能は、Bootstrapツールチップを使用して簡単に実現できます。

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

次に、要素に対してtooltip（）関数を呼び出します。

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

于 2015-02-04T06:28:13.773 に答える
1

これらの回答のいくつかを試し、複数のリンクでうまくスケーリングできないことを発見した後（たとえば、受け入れられた回答では、リンクごとにjqueryの行が必要です）、動作するために最小限のコードを必要とする方法に出くわしました。また、少なくともChromeでは完全に機能しているようです。

次の行を追加してアクティブにします。

$('[data-toggle="popover"]').popover();

そして、アンカーリンクへのこれらの設定：

data-toggle="popover" data-trigger="hover"

ここで実際の動作を確認してください。受け入れられた回答と同じインポートを使用しているため、古いプロジェクトでは正常に機能するはずです。

于 2017-11-08T13:50:24.057 に答える