jQuery Bootstrap 3 Popover 箭头和框定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19427857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Popover arrow and box positioning
提问by Shamrockonov
I am using Bootstrap 3popovers to display information about a link on hover, before clicking the link.
Bootstrap 3在单击链接之前，我正在使用弹出窗口显示有关悬停链接的信息。
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.
当第一个链接有很多关于它的信息时，popover的顶部消失在页面顶部，因此您看不到它的内容。
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
});
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.
以上工作正常，但我不相信任何弹出窗口选项能够在这里帮助我。它是我需要更改的 CSS，但发布内容相当广泛，所以我只是在寻找具有引导程序知识的人来为我指明正确的方向。
回答by Zim
You can customize the placement of the popover or it's arrow my manipulating the .popoverCSS once the popover is shown.
您可以自定义弹出框的位置，或者在显示弹出框后我操纵.popoverCSS的箭头。
For example, this pushes the top of the popover down 22 pixels..
例如，这会将弹出窗口的顶部向下推 22 个像素。
$('[data-toggle=popover]').on('shown.bs.popover', function () {
$('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})
Working demo: http://bootply.com/88325
工作演示：http: //bootply.com/88325
回答by HaNdTriX
I recommend using the placement method rather than the shown.bs.popoverevent.
This will not trigger a popover jump when the element is shown.
我建议使用放置方法而不是shown.bs.popover事件。这不会在显示元素时触发弹出跳转。
This is how it works:
这是它的工作原理：
$('[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';
},
});
回答by Edward Fung
My use case is that the popover placement is topand I have to remove the arrow.
我的用例是弹出窗口的位置是top，我必须删除箭头。
I followed the solution provided by @Skelly while I was using bootstrap 3.2.0.
One problem is that the popover flash as the css property topis updated in the shown.bs.popover.
我在使用引导程序 3.2.0 时遵循了@Skelly 提供的解决方案。一个问题是 popover flash 作为 css 属性top在shown.bs.popover.
In fact, you can override the templateproperty when initializing the popover and add some margin-top(margin-leftif the placement is left/right) to it.
实际上，您可以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>'
});
回答by mikeytown2
I was having issues with the popover going above so I couldn't see it. This fixed it for me
我在上面的弹出窗口中遇到了问题，所以我看不到它。这为我修好了
// 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');
}
回答by Shubham Nigam
It will provide exact position to ur arrow
它将为您的箭头提供准确的位置
$(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');
});
