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.

当第一个链接有很多关于它的信息时，popover的顶部消失在页面顶部，所以你看不到它的内容.

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，但发布内容相当广泛，所以我只是在寻找具有引导程序知识的人来为我指明正确的方向.

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屋！