Bootstrap Popover箭头和框定位 [英] Bootstrap Popover arrow and box positioning

问题描述

我使用Bootstrap popovers在点击链接之前显示关于悬停的链接的信息。
目前它正在工作，但是，链接从页面顶部的下拉菜单中显示。当第一个链接有很多关于它的信息时，popover的顶部消失在页面的顶部，所以你看不到它的内容。我试图让它，使弹出框的箭头出现在弹出框的左上角（而不是它现在做的中间左边），如果这是有意义的，popover框的顶部与箭头水平。

I am using Bootstrap popovers to display information about a link on hover, before clicking the link. It's currently working at the moment, however, The links are displayed from a dropdown menu at the top of the page. When the first link has alot of information about it, the top of the popover disappears at the top of the page, so you cannot see the content of it. I am trying to make it so that the popover arrow appears at the top-left of the popover(as opposed to middle-left which it is doing now) and the top of the popover box is level with the arrow if that makes sense.

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

以上工作正常，但我不相信任何popover选项都能帮助我。它的CSS我需要改变，但它相当广泛的帖子，所以我只是寻找一个知识的bootstrap指向我的方向正确的方向。

谢谢。

This above is working fine but I don't believe any popover options are able to help me here. Its the CSS I need to change but its rather extensive to post, so I was just looking for some one with knowledge of bootstrap to point me in the right direction.
Thanks.

推荐答案

您可以自定义popover的位置或者它的箭头我操纵 .popover

You can customize the placement of the popover or it's arrow my manipulating the .popover CSS once the popover is shown.

例如，这会将弹出框的顶部向下推动22像素。

For example, this pushes the top of the popover down 22 pixels..

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

工作演示： http://bootply.com/88325

这篇关于Bootstrap Popover箭头和框定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！