web-dev-qa-db-ja.com

ブートストラップポップオーバーをクリックではなくホバーに表示/非表示にする

私はBootstrapの Popover でWebサイトを構築していますが、ポップオーバーをクリックではなくホバーに表示する方法を理解できません。

私がしたいのは、誰かがリンクをクリックするのではなくリンクの上にマウスを移動したときにポップオーバーが表示され、移動したときにポップオーバーが消えるようにすることです。ドキュメントにはdata属性かjqueryのどちらを使っても可能であると書かれています。私は複数のポップオーバーがあるのでjqueryを使ってもっとやりたいと思います。

javascriptjquerytwitter-bootstrap
172
Muhambi

ポップオーバーのtriggerオプションを、 デフォルト のhoverではなくclickに設定します。

これはマークアップのdata-*属性を使って行うことができます。

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

または初期化オプションを使用して：

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

これがDEMOです。

353
João Silva

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

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

30
Calexo

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

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

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);
    });
}
11
Johannes Ferner

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

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

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

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

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

6
VforVitamin

これらの答えのいくつかを試してみて、それらが複数のリンクに対してうまく拡張できないことを見つけた後（例えば、受け入れられた答えはあなたが持っているすべてのリンクに対してjqueryの行を必要とします）。少なくともChrome上でも、完璧に動作するようです。

この行を追加して有効にします。

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

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

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

ここでそれを実際に見てください 、私は受け入れられた答えと同じインポートを使っていますので古いプロジェクトではうまく動くはずです。

1
Peter