8

我有一个出现在标签左侧的弹出框：

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

弹出框当前正在阻止一个单选按钮，我想将其向左移动，例如 10 像素。我似乎无法弄清楚如何做到这一点。offset 似乎什么都不做（如果我添加 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;
}

但这远非理想，因为它使用不同的浏览器出现在不同的地方。

必须有一种方法可以添加一个小的右边距，是吗？

谢谢。

4

3 回答 3

12

为单个弹出框设置样式似乎是不可能的，而且 - 正如 Sara 所提到的 - 没有这样的选项offset（您可能会想到 qtip？）。但是，您可以使用未记录的选项template，从选项“派生” 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因

更新 - 将整个弹出框样式设置为左侧 +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>'
...
于 2012-10-26T00:45:15.987 回答
2

试试这个来添加右边距：

.popover.left{
  left: calc(100% - 10px) !important;
}
于 2015-06-05T11:29:15.630 回答
1

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

于 2015-07-15T15:41:13.900 回答