Bootstrap 3 Popover箭头和框的位置 [英] Bootstrap 3 Popover arrow and box positioning

问题描述

在点击链接之前，我正在使用Bootstrap 3弹出窗口显示有关悬停链接的信息.

I am using Bootstrap 3 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 a lot 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
});

以上操作效果很好，但我不认为任何弹出菜单选项都可以在这里为我提供帮助.我需要更改它的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 it's rather extensive to post, so I was just looking for someone with knowledge of bootstrap to point me in the right direction.

推荐答案

您可以自定义弹出窗口的位置，也可以自定义箭头，一旦显示弹出窗口，便可以操纵.popover CSS.

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 3 Popover箭头和框的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！