14

Bootstrap 3リンクをクリックする前に、ホバー時にリンクに関する情報を表示するためにポップオーバーを使用しています。

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

最初のリンクに多くの情報が含まれている場合、ポップオーバーの上部がページの上部に表示されなくなり、その内容が見えなくなります。

ポップオーバーの矢印がポップオーバーの左上に表示され（現在行われている中央左とは対照的に）、ポップオーバーボックスの上部が矢印と同じ高さになるようにしようとしています。

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

上記は正常に機能していますが、ポップオーバーオプションがここで役立つとは思いません。それは私が変更する必要があるCSSですが、投稿するのはかなり広範囲なので、正しい方向に向けるためにブートストラップの知識を持つ人を探していました.

4

5 に答える 5

26

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

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

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

動作デモ: http://bootply.com/88325

于 2013-10-17T14:37:11.307 に答える
-1

それはあなたの矢に正確な位置を提供します 

 $(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');
    });
于 2015-02-24T12:27:09.877 に答える