web-dev-qa-db-ja.com

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

Twitter Bootstrap Popover version 1.3. を使用していくつかの情報を表示するリンクがあります。この情報にはリンクが含まれていますが、ポップオーバーへのリンク、ポップオーバーは消えます。

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

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

javascriptjquerytwitter-bootstraptwitter-bootstrap-3popover
50
Tinyfool

これで、webuiPopoverに切り替えるだけで機能します。

0
Tinyfool

bootstrap（バージョン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（）イネーブラーでテンプレートをオーバーライドすることです。これがお役に立てば幸いです。

31
marchello

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

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);
});
26
Kevin Lawrence

ブートストラップ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;
}
_

WORKING DEMO

26
Fizzix

これは少しハッキーですが、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は、トリガーリンクからポップオーバーまで移動する時間があることを確認するのに役立ちます。

19
clem

bootstrap 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'});
});
11
stevendaniels

私の見解： http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

マウスをポップオーバートリガーから実際のポップオーバーコンテンツに斜めに移動するときに、下の要素にカーソルを合わせます。このような状況に対処したかったのです。タイムアウトが発生する前にポップオーバーコンテンツに到達する限り、保存できます（ポップオーバーは消えません）。 delayオプションが必要です。

このハックは基本的にPopover leave関数をオーバーライドしますが、元の関数（タイマーを開始してポップオーバーを非表示にします）を呼び出します。次に、一時的なリスナーをmouseenter popoverコンテンツ要素にアタッチします。

マウスがポップオーバーに入ると、タイマーはクリアされます。次に、ポップオーバーでmouseleaveをリッスンし、トリガーされた場合、元のleave関数を呼び出して、タイマーを非表示にします。

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)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};
4
Wojtek Kruszewski

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

ここに私がやったことがあります：

e = $("a[rel=popover]")
e.popover({
    content: d, 
    html:true, 
    trigger:'hover',
    delay: {hide: 500},
    placement: 'bottom',
    container: e, 
})

これは、このproblemに対する非常にシンプルで素晴らしいソリューションです。bootstrap=ツールチップコードを調べて見つけました。InBootstrap v3.0.3は私が気づいたコード行：

this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)

これは、popoverのcontainerプロパティが定義されている場合、popoverがinsertAfter（）の代わりに元の要素の要素を取得することを意味します。必要なことは、コンテナプロパティとして要素を渡すだけです。 appendTo（）により、ポップオーバーはホバーイベントがバインドされたリンクの一部になり、マウスが移動したときにポップオーバーを開いたままにします。

1
vinit

最後に、この問題を修正します。ポップオーバーが消えるのは、ポップオーバーがリンクの子ノードではなく、ボディの子ノードだからです。

簡単に修正し、_bootstrap-twipsy.js_の内容を変更します：

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

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

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

1
Tinyfool

これはBootStrapで動作します：

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();
});
1
ShogunPanda

これは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);
1
danielgatis

@Wotjek Kruszewskiと@danielgatisのソリューションを試しましたが、どちらもうまくいきませんでした。警告：Bootstrap v2.1.0、v3ではありません。このソリューションは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
1
Micah Winkelspecht

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

0
Miika L.

私が見つけた答えはどれも好きではなかったので、次のコードを作成するために近いいくつかの答えを組み合わせました。 「ピン留め可能な」ポップオーバーを作成するたびに$(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'});
0
Timothy Zorn

すべての回答を見た後、私はこれを作成しました。私はそれが役立つと思います。あなたが必要とするすべてを管理できます。多くの答えは、私がこれを使用するショーの遅延をしません。その仕事は私のプロジェクトではとても素晴らしい
/******/**************************************** ************************ /

<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); });
0
Ashaduzaman Bhuiyan