左定位一个Bootstrap Popover

Question

我有一个标签左侧的弹出窗口:

 $('label').hover(function () {
                $(this).popover({
                    offset: 10,
                    placement: 'left'
                }).popover('show');

popover目前阻止一个单选按钮,我想向左移动,比如10px.我似乎无法弄清楚如何做到这一点.偏移似乎什么都不做(如果我添加10或10000它没有什么区别).以下是一个此类标签的HTML:

 <label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary ($250,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label> 

我可以尝试通过覆盖CSS中的类来设置弹出窗口位置,例如:

.popover {
    left: 380px !important;
}

但这远非理想,因为它出现在使用不同浏览器的不同位置.

还有必须要增加一个小的右边界的一种方式,是吗？

谢谢.

Answer 1

似乎不可能设计一个单一的popover,并且 - 正如Sara所提到的 - 没有这样的选择offset(你可能会想到qtip？).但是,您可以使用未选择的选项template,从选项中"派生" tooltip(实际上,仅限popover content).

通过修改template你可以单独设置每个popover样式!在我看来,你的问题arrow不仅仅是popover本身,所以你可以尝试从中间向上或向下移动箭头,只需在模板中添加箭头样式,就像这样

$('label').hover(function() {
    $(this).popover({
        placement: 'left',
        template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    }).popover('show');
});

当然,这里为所有标签设置的所有弹出框的箭头都会被修改$('label').hover,但是弹出框可以单独设置样式而不需要CSS,没有单选按钮可能不需要.

更新 - 整个popover样式+ 10px左侧

...
 template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
...