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，＆＃34;派生＆＃34;来自tooltip选项（事实上，popover只介绍content）。

通过修改template，您可以单独设置每个弹出框的样式！在我看来，你的问题是arrow比弹出本身更多，所以你可以尝试从中间向上或向下移动箭头，只需在模板中添加箭头样式，就像这样

$('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，没有单选按钮可能不需要。 / p>

UPDATE - 将整个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>'
...

Answer 2

尝试此选项以添加正确的边距：

.popover.left{
  left: calc(100% - 10px) !important;
}

Answer 3

您可以向元素添加data-placement ='left'。

左定位一个Bootstrap Popover

3 个答案: