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

181

ブートストラップのポップオーバーを使用してウェブサイトを構築していますが、ポップオーバーをクリックではなくホバーに表示する方法を理解できません。

私がやりたいのは、誰かがリンクをクリックする代わりにリンクの上にカーソルを置いたときにポップオーバーを表示させ、離れるとポップオーバーが消えるようにすることです。ドキュメントには、data属性またはjqueryのいずれかを使用して可能であると記載されています。複数のポップオーバーがあるので、jqueryを使用するほうがはるかに便利です。

javascript jquery twitter-bootstrap

— ムハンビ
ソース

20

ヒント：ホバーはタッチデバイスを吸います。タッチスクリーンの使いやすさを確保したい場合は、機能をホバーにバインドしないでください。

— ヨルゲンR

374

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

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

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

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

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

これがデモです。

— ジョアン・シルバ
ソース

返信いただきありがとうございます。このコードにトリガーオプションを設定するにはどうすればよいですか？<script> $(function () { $("#popover").popover(); }); </script>

— Muhambi 2012

8

@ジェイク：を使用し$("#popover").popover({ trigger: "hover" });ます。

— ジョアン・シルバ

ありがとう！何らかの理由で、データトリガーとJS初期化の両方を実装する必要がありました。

— アンソニー

誰が私にJSの初期化とデータ属性のどちらがより良いオプションかを理解するのを手伝ってくれる？データ属性を使用する場合でも、$（ "＃popover"）。popover（）;を呼び出す必要があります。私のJavaScriptから。

— ベイリー、

@ベイリーそれはあなたのコーディングルールが何であるか、そしてあなたが特定のコーディング標準で作業しているかどうか、そして個人的な好みに依存します。2つを見て、私はpopover（）関数内のトリガーオプションをターゲットにすることを好みます。私にはもっと読みやすいようです。

— Coderhi

33

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

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

— カレクソ
ソース

このリクエストはクリックしないでください。このタイトルの投稿をご覧ください

— アルバカーキのウェブデザイン

14

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

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

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);
    });
}

— ヨハネス・ファーナー
ソース

6

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

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

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

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

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

— VforVitamin
ソース

1

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

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

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

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

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

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

— ピーター
ソース