16

ホバートリガーでポップオーバーを表示するとうまくいきます。

クリックトリガーでポップオーバーを表示するとうまくいきます。

さて、トリガー画像がホバーされたときにポップオーバーを表示する方法はありますが、ユーザーが画像をクリックすると、ホバーをキャンセルしてクリックトグルを開始しますか? つまり、ホバリングするとポップオーバーが表示され、クリックするとポップオーバーが「固定」されます。

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 さんから提供されたコードをベースに、イベントをリッスンしてhidden.bs.popover、クリック イベントをトリガーした後に mouseenter および mouseleave イベントを再度有効にしようとする関数を追加しましたが、「ホバー」は再び機能しますが、クリックを殺します...

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

4 に答える 4

19

編集：

あなたのコメントに基づいて更新されたソリューションを紹介します。「クリック」状態にとどまらず、ホバー状態に戻ります。

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、ポップオーバーを切り替えるイベントに新しいハンドラーを追加します。

編集: 代替 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');
    });
于 2013-09-12T03:35:42.150 に答える
6

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

<span rel="popover" data-trigger="hover click" data-container="body" data-placement="auto" data-content="Body Text"></span>
于 2015-07-22T07:32:14.260 に答える