web-dev-qa-db-ja.com

Bootstrap 3 Popover：ホバーで表示、クリックで表示、別名。Popoverを固定

hoverトリガーを使用してポップオーバーを表示すると正常に機能します。

clickトリガーを使用してポップオーバーを表示すると正常に機能します。

トリガー画像がホバーされたときにポップオーバーを表示するにはどうすればよいですか？ユーザーが画像をクリックした場合、ホバーをキャンセルしてクリックトグルを開始しますか？つまり、ホバリングするとポップオーバーが表示され、クリックするとポップオーバーが「固定」されます。

HTMLはかなり標準です：

_<li>User<span class="glyphicon glyphicon-user" rel="popover" data-trigger="click" data-container="body" data-placement="auto left" data-content="Body Text" data-original-title="Title Text"></span></li>
_

ポップオーバーの初期化、さらに退屈：

_$(function () { 
    $("[rel=popover]").popover();   
});
_

私がこれまで見てきたことから、解決策はpopover('show')、popover('hide')、およびpopover('toggle')の呼び出しのニースの複雑なセットであるようですが、私のjavascript/jQuery-fooはタスク次第ではありません。

編集：

@hajpojが提供するコードをベースとして、クリックイベントをトリガーした後にmouseenterイベントとmouseleaveイベントを再度有効にしようとする_hidden.bs.popover_イベントをリッスンする関数を追加しましたが、 '再び動作し、クリックを停止します...

_var $btn2 = $('#btn2');

    var enterShow = function() {
        $btn2.popover('show');
    };

    var exitHide = function() {
        $btn2.popover('hide');
    }

    $btn2.popover({trigger: 'manual'})
            .on('mouseenter', enterShow)
            .on('mouseleave', exitHide)
            .one('click', function() {
                   $btn2.off('mouseenter', enterShow)
                        .off('mouseleave', exitHide)
                        .on('click', function() {
                            $btn2.popover('toggle');
                        });
            });

$('#btn2').on('hidden.bs.popover', function () {
  $btn2.on('mouseenter', enterShow)
       .on('mouseleave', exitHide)
});
_
javascriptjquerytwitter-bootstrappopover
16
stk11067

編集：

あなたのコメントに基づいて更新された解決策があります。 「クリック」状態ではなく、ホバー状態に戻ります。

jsfiddle： http://jsfiddle.net/hajpoj/JJQS9/15/

html：

<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

js：

var $btn2 = $('#btn2');
$btn2.data('state', 'hover');

var enterShow = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('show');
    }
};
var exitHide = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.data('state', 'pinned');
    } else {
        $btn2.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn2.popover({trigger: 'manual'})
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);

古い：

私はこれがあなたが探しているものだと信じています：

http://jsfiddle.net/JJQS9/1/

html：

<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

js：

var $btn2 = $('#btn2');

var enterShow = function() {
    $btn2.popover('show');
};

var exitHide = function() {
    $btn2.popover('hide');
}

$btn2.popover({trigger: 'manual'})
        .on('mouseenter', enterShow)
        .on('mouseleave', exitHide)
        .one('click', function() {
            $btn2.off('mouseenter', enterShow)
                    .off('mouseleave', exitHide)
                    .on('click', function() {
                        $btn2.popover('toggle');
                    });
        });

基本的に、mouseenterイベントとmouseleaveイベントでポップオーバーを手動で開閉しますが、誰かが初めてポップオーバーをクリックすると、それらのイベントハンドラーを削除し、新しいハンドラーを追加しますポップオーバーを切り替えるclickイベント。

Edit：代替のjsコード。より単純なコードですが、使用すると小さな視覚的なブリップがあります： http://jsfiddle.net/hajpoj/r3Ckt/1/

var $btn2 = $('#btn2');

$btn2.popover({trigger: 'hover'})
    .one('click', function() {
        $btn2.popover('destroy')
            .popover({ trigger: 'click'})
            .popover('show');
    });
18
hajpoj

非常に簡単です。次のようにhoverをdata-triggerに追加します。

<span rel="popover" data-trigger="hover click" data-container="body" data-placement="auto" data-content="Body Text"></span>
5
bart

両方のオプションを探している機能を提供できるハイブリッドポップオーバー/ツールチップを次に示します。クリックとホバーの切り替え）。

ハイブリッドポップオーバー/ツールチップフィドル

HTML：

<button id="tip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title='this text!'>What's hidden?</button>

JS：

var $tip1 = $('#tip1');

$tip1.tooltip({trigger: 'hover'})
  .on('click', function() {
    $tip1.tooltip('toggle');
});
4
mikesi2

BootstrapおよびJQueryを使用してホバー/ピン機能を実現した方法は次のとおりです。

$(function () {
    var clicked = false;

    var onLeave = function() {
        if (!clicked) { $(this).popover('hide'); }
    };

    var onEnter = function () {
        if (!clicked) { $(this).popover('show'); }
    };

    var clickToggle = function() {
        if (clicked) { $(this).popover('hide'); }
        clicked = !clicked;
    }
    $('.popover-div-class').popover({ trigger: "manual"})
        .on('mouseenter', onEnter)
        .on('mouseleave', onLeave)
        .on('click', clickToggle);
});

すべてのシナリオで機能するかどうかはわかりませんが、私の場合は機能しました。インスピレーションを得るための@hajpojと@Trevorへの大きなコメント。

JSFiddle： https://jsfiddle.net/5m2ob3yf/ （まだ動作しませんが、Gistを取得できます）。

1
BtLutz