web-dev-qa-db-ja.com

Bootstrap 3ポップオーバー矢印とボックスの配置

使っています Bootstrap 3 popoversは、リンクをクリックする前に、ホバー時にリンクに関する情報を表示します。

現在は機能していますが、リンクはページ上部のドロップダウンメニューから表示されます。

最初のリンクに多くの情報が含まれている場合、ポップオーバーの上部がページの上部に表示されなくなるため、その内容を見ることができません。

私はそれを作って、ポップオーバーの矢印がポップオーバーの左上に表示されるようにしています（現在行っている中央左ではなく）。

$('.popOver').popover({
    trigger: 'hover',
    html: true
});

上記はこれでうまくいきますが、ポップオーバーのオプションがここで私を助けることができるとは思いません。変更する必要があるCSSですが、投稿するのはかなり広範囲です。そのため、bootstrapの知識がある人を探して、正しい方向に向けました。

javascriptjquerycsstwitter-bootstrap-3popover
14
Shamrockonov

ポップオーバーの配置をカスタマイズできます。または.popoverポップオーバーが表示されたらCSS。

たとえば、これはポップオーバーの上部を22ピクセル押し下げます。

$('[data-toggle=popover]').on('shown.bs.popover', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})

作業デモ： http://bootply.com/88325

26
Zim

shown.bs.popoverイベントではなく配置方法を使用することをお勧めします。これは、要素が表示されているときにポップオーバージャンプをトリガーしません。

これがどのように機能するかです：

$('[data-toggle=popover]').popover({
  placement: function(context, source) {
    var self = this;
    setTimeout(function() { 
      self.$arrow.css('top', 55);
      self.$tip.css('top', -45);
    }, 0);
    return 'right';
  },
});
6
HaNdTriX

私の使用例は、ポップオーバーの配置がtopであり、矢印を削除する必要がある場合です。

bootstrap 3.2.0を使用しているときに、@ Skellyによって提供されたソリューションを使用しました。1つの問題は、cssプロパティtopとしてのポップオーバーフラッシュがshown.bs.popover。

実際、ポップオーバーを初期化するときにtemplateプロパティをオーバーライドし、それにmargin-top（配置が左/右の場合はmargin-left）を追加できます。

$('[data-toggle=popover]').popover({
  placement: 'top',
  template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

デモ： http://www.bootply.com/gWwmO5XdbL

2
Edward Fung

上に表示されるポップオーバーに問題があったため、表示されませんでした。これは私のためにそれを修正しました

// Move things around if the popover is clipped on top.
if (parseInt($('.popover').position().top) < 10) {
  var arrow_position = parseInt($(this).position().top);
  $('.popover').css('top', 10 + 'px');
  $('.popover .arrow').css('top', arrow_position + 'px');
}
0
mikeytown2