javascript - マウスがそこに移動するまでTwitter Bootstrap Popoverを開いたままにするにはどうすればよいですか?

Question

Twitter Bootstrap Popover バージョン 1.3.0を使用して情報を表示するリンクがあります。この情報にはリンクが含まれていますが、マウスをリンクからポップオーバーに移動するたびに、ポップオーバーが消えてしまいます。

マウスがポップオーバーに移動できるように、ポップオーバーを開いたままにしておくにはどうすればよいですか? 次に、マウスがリンクとポップオーバーの外に出たら、非表示にしますか?

または、これを行うことができる他のプラグインはありますか?

score 31 · Accepted Answer

ブートストラップ（バージョン2でテスト済み）を使用して、次のコードを見つけました。

$("a[rel=popover]")
            .popover({
                offset: 10,
                trigger: 'manual',
                animate: false,
                html: true,
                placement: 'left',
                template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

            }).click(function(e) {
                e.preventDefault() ;
            }).mouseenter(function(e) {
                $(this).popover('show');
            });

主なポイントは、mouseleave（）イネーブラーでテンプレートをオーバーライドすることです。これがお役に立てば幸いです。

score 28 · Accepted Answer

ブートストラップ 3 以上

シンプルです。containerオプションを使用して、ポップオーバーを呼び出す要素として使用するだけです。このように、ポップオーバーはそれを呼び出す要素の子です。したがって、子ポップオーバーが親に属しているため、技術的にはまだ親の上にカーソルを置いています。

例えば：

HTML:

<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>

jQuery:

$.each()ポップオーバーを親にバインドするすべての要素に対してループを実行します。この場合、各要素はのクラスを持ちpopます。

$('.pop').each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $elem
    });
});

CSS:

この部分はオプションですが、推奨されます。簡単にアクセスできるように、ポップオーバーを 7 ピクセル下に移動します。

.pop .popover {
    margin-top:7px;
}

ワーキングデモ

score 26 · Accepted Answer

Marchello の例に追加すると、ユーザーがマウスをポップオーバーとソースリンクから離したときにポップオーバーを非表示にしたい場合は、これを試してください。

var timeoutObj;
$('.nav_item a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide();});"><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');
}).mouseleave(function(e) {
    var ref = $(this);
    timeoutObj = setTimeout(function(){
        ref.popover('hide');
    }, 50);
});

score 19 · Accepted Answer

これは少しハックですが、marchello の例に基づいて構築し、これを行いました (テンプレートは必要ありません)。

$(".trigger-link").popover({
  trigger: "manual",
}).on("click", function(e) {
  e.preventDefault();
}).on("mouseenter", function() {
  var _this = this;
  $(this).popover("show");
  $(this).siblings(".popover").on("mouseleave", function() {
    $(_this).popover('hide');
  });
}).on("mouseleave", function() {
  var _this = this;
  setTimeout(function() {
    if (!$(".popover:hover").length) {
      $(_this).popover("hide")
    }
  }, 100);
});

これsetTimeoutにより、トリガーリンクからポップオーバーまで移動する時間を確保できます。

score 11 · Accepted Answer

ブートストラップgithubリポジトリのこの問題は、この問題に対処します。fatは、実験的な「上/下/左/右」の配置を指摘しました。それはかなりうまく機能しますが、ポップオーバートリガーがcssで静的に配置されていないことを確認する必要があります。そうしないと、ポップオーバーが希望の場所に表示されません。

HTML：

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>

CSS：

/*CSS */
.myClass{ position: relative;}

JS：

$(function(){
  $('.myClass').popover({placement: 'in top'});
});

score 4 · Accepted Answer

Bootstrap 3 では解決策がうまくいきました。

var timeoutObj;
$('.list-group a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});"><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');
}).mouseleave(function(e) {
    var _this = this;
    setTimeout(function() {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100);
});

score 1 · Accepted Answer

@Wotjek Kruszewski と @danielgatis の解決策を試しましたが、どちらもうまくいきませんでした。警告: v3 ではなく、Bootstrap v2.1.0 を使用しています。この解決策はcoffeescriptにあります（なぜ人々はまだプレーンなjavascriptを使用しているのですか? =)）。

(($) ->
  originalLeave = $.fn.popover.Constructor::leave
  $.fn.popover.Constructor::leave = (e) ->
    self = $(e.currentTarget)[@type](@_options).data(@type)
    originalLeave.call @, e

    if e.currentTarget
      container = $(".popover")
      container.one "mouseenter", ->
        clearTimeout self.timeout

        container.one "mouseleave", ->
          originalLeave.call self, e
) jQuery

score 1 · Accepted Answer

これはBootStrap 3で機能します:

el.popover({
  delay: {hide: 100}
}).on("shown.bs.popover", function(){
  el.data("bs.popover").tip().off("mouseleave").on("mouseleave", function(){
    setTimeout(function(){
      el.popover("hide");
    }, 100);
  });
}).on("hide.bs.popover", function(ev){
  if(el.data("bs.popover").tip().is(":hover"))
    ev.preventDefault();
});

score 1 · Accepted Answer

最後に、この問題を修正します。ポップオーバーが消えるのは、ポップオーバーがリンクの子ノードではなく、本体の子ノードであるためです。

修正は簡単です。bootstrap-twipsy.jsコンテンツを変更します。

.prependTo(document.body)に変更.prependTo(this.$element)

変更による位置の問題を修正します。

また、一部のリンクタイガーポップオーバーを使用すると、リンク付きのポップオーバーも発生するため、リンクを含むスパンを追加して、問題を解決します。

score 1 · Accepted Answer

これは、Wojtek Kruszewski ソリューションのバージョンです。このバージョンでは、マウスがトリガーに戻ったときにポップオーバーの点滅を処理します。http://jsfiddle.net/danielgatis/QtcpD/

(function($) {
      var originalLeave = $.fn.popover.Constructor.prototype.leave;
      $.fn.popover.Constructor.prototype.leave = function(obj) {
        var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
        originalLeave.call(this, obj);
        if (obj.currentTarget) {
          var current = $(obj.currentTarget);
          var container = current.siblings(".popover");
          container.on("mouseenter", function() {
            clearTimeout(self.timeout);
          });
          container.on("mouseleave", function() {
            originalLeave.call(self, self);
          });
        }
      };

      var originalEnter = $.fn.popover.Constructor.prototype.enter;
      $.fn.popover.Constructor.prototype.enter = function(obj) {
        var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
        clearTimeout(self.timeout);
        if (!$(obj.currentTarget).siblings(".popover:visible").length) {
          originalEnter.call(this, obj);
        }
      };
    })(jQuery);

score 0 · Accepted Answer

すべての回答を見た後、これを作成しました。役立つと思います。必要なものすべてを管理できます。多くの答えは、私がこれを使用することを遅らせません。私のプロジェクトで非常にうまく機能します
/******** /************************************ ************************/

<div class='thumbnail' data-original-title=''  style='width:50%'>    
 <div id='item_details' class='popper-content hide'>
    <div>
        <div style='height:10px'> </div>
        <div class='title'>Bad blood </div>
        <div class='catagory'>Music </div>
    </div>

  </div>
  HELLO POPOVER
</div>"

/****************スクリプトコード ****************** 聞いてから使用してください ******/

$(".thumbnail").popover({
trigger: "manual" ,
html: true,
animation:true,
container: 'body',
placement: 'auto right',
content: function () {
    return $(this).children('.popper-content').html();
}}) .on("mouseenter", function () {
var _this = this;

$('.thumbnail').each(function () {
    $(this).popover('hide');
});
setTimeout(function(){
    if ($(_this).is(':hover')) {
        $(_this).popover("show");
    }
},1000);
$(".popover").on("mouseleave", function () {
    $('.thumbnail').each(function () {
        $(this).popover('hide');
    });
    $(_this).popover('hide');
 }); }).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100); });

score 0 · Accepted Answer

@stevendaniels によってリンクされた会話の最後に、BootstrapX と呼ばれる Twitter Bootstrap 拡張機能へのリンクがあります- Lee Carmichael によるクリックオーバー。これにより、ポップオーバーが大きすぎるツールチップからインタラクティブコントロールに変わり、フォームの他の場所をクリックするか、閉じるボタンをクリックするか、タイムアウト後に閉じることができます。使いやすく、必要なプロジェクトで非常にうまく機能しました。その使用例は、ここにあります。

score 0 · Accepted Answer

私が見つけた答えのどれも気に入らなかったので、次のコードを作成するのに近いいくつかの答えを組み合わせました。$(selector).pinnablepopover(options);「固定可能な」ポップオーバーを作成するたびに、入力するだけで済みます。

物事を簡単にするコード:

$.fn.popoverHoverShow = function ()
{
    if(this.data('state') !== 'pinned')
    {
        if(!this.data('bs.popover').$tip || (this.data('bs.popover').$tip && this.data('bs.popover').$tip.is(':hidden')))
        {
            this.popover('show');
        }
    }
};
$.fn.popoverHoverHide = function ()
{
    if (this.data('state') !== 'pinned')
    {
        var ref = this;
        this.data('bs.popover').$tip.data('timeout', setTimeout(function(){ ref.popover('hide') }, 100))
        .on('mouseenter', function(){ clearTimeout($(this).data('timeout')) })
        .on('mouseleave', function(){ $(this).data('timeout', setTimeout(function(){ ref.popover('hide') }, 100)) });
        this.on('mouseenter', function(){ clearTimeout($(this).data('timeout')) });
    }
};
$.fn.popoverClickToggle = function ()
{
    if (this.data('state') !== 'pinned')
    {
        this.data('state', 'pinned');
    }
    else
    {
        this.data('state', 'hover')
    }
};
$.fn.pinnablepopover = function (options)
{
    options.trigger = manual;
    this.popover(options)
    .on('mouseenter', function(){ $(this).popoverHoverShow() })
    .on('mouseleave', function(){ $(this).popoverHoverHide() })
    .on('click', function(){ $(this).popoverClickToggle() });
};

使用例:

$('[data-toggle=popover]').pinnablepopover({html: true, container: 'body'});

score -1 · Accepted Answer

-1

今、私は webuiPopover に切り替えるだけで、うまくいきます。

于 2017-02-15T07:59:51.323 に答える

javascript - マウスがそこに移動するまでTwitter Bootstrap Popoverを開いたままにするにはどうすればよいですか?

16 に答える 16

ブートストラップ 3 以上

Related

Reference