ブートストラップポップオーバーの矢印とボックスの位置付け

Question

私は、リンクをクリックする前に、ホバーのリンクに関する情報を表示するためにブートストラップのポップオーバーを使用しています。 現在、現在作業中ですが、リンクはページ上部のドロップダウンメニューから表示されます。最初のリンクに多くの情報があると、ページ上部のポップオーバーの上部が消えるため、その内容は表示されません。私はポップオーバーの矢印がポップオーバーの左上に現れるようにしようとしています（これは現在行っている中央の左とは対照的です）。

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

上記これは正常に動作しているが、私は任意のポップオーバーのオプションは、ここで私を助けることができます信じていません。私は変更する必要があるが、投稿するのにはかなり広範囲なCSSが必要なので、正しい方向に向けるためのブートストラップに関する知識を持った人物を探していただけです。
ありがとうございます。

Answer 1

ポップオーバーが表示されたら、.popover CSSを操作して、そのポップオーバーの配置をカスタマイズすることができます。

例えば、これは22個のピクセルをポップオーバーの上部を押し下げる。..

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

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

Answer 2

それは

矢印ウルために正確な位置を提供します

$(el).on('shown.bs.popover', function() { 
    var position = parseInt($('.popover').position().top); 
    var pos2 = parseInt($(el).position().top) - 5; 
    var x = pos2 - position + 5; 
    if (popoverheight < x) 
    x = popoverheight; 
    $('.popover.left .arrow').css('top', x + 'px'); 
    }); 

Answer 3

M yユースケースは、ポップオーバー配置がtopであり、矢印を削除する必要があるということです。

私はブートストラップ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

Answer 4

私は、配置方法ではなく、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'; 
    }, 
}); 

Answer 5

ので、私はそれを見ることができませんでした：

これは、それがどのように動作するかです。これは私のために固定

// 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'); 
}