Bootstrapのポップオーバー(Popovers)でコンテンツに触れている間はhover状態をキープする

harada 3,815views 更新:2014年4月30日

デフォルトのままですと、ポップオーバーのtriggerをhoverにした場合、ポップオーバー内にリンクを設置しても、カーソルを移動した途端にポップオーバーが閉じてしまってクリックできません。
そこで下記のように記述することでリンクとポップオーバーに触れている間も、閉じないようにすることができます。
表示サンプルはこちら

$("[data-toggle=popover]").popover({
    trigger: 'manual',
    animate: false,
    html: true,
    placement: 'top',
    template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});" style="display:block;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
});

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません