左侧定位Bootstrap的弹出框

Question

左侧定位Bootstrap的弹出框

8

我有一个弹出框，它出现在标签的左边：

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

弹出框当前挡住了一个单选按钮，我想将其向左移动10像素。但是我似乎无法找到如何实现这一点的方法。偏移量似乎根本没有用（如果我加上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;
}

但是在不同的浏览器中，它出现在不同的位置，这远非理想。

一定有一种方法可以添加一个小的右边距，对吗？

谢谢。

- Peter

我必须在几分钟内离开，直到今天晚些时候回家后才有时间发布到JS fiddle。感谢您的帮助。同时，我已经发布了我的HTML。 - Peter

只是一条注释，popover文档没有将offset列为一个选项。 - Sara

啊，是的，谢谢Sara。我应该看文档而不是在线查看别人的代码。 - Peter

你尝试过更改 popover 的目标吗？例如，不要将其附加到标签（因为它会按预期覆盖单选按钮），而是附加到单选按钮本身，或甚至覆盖整个结构的 div 上？ - Miika L.

谢谢你的建议，Mika。单选按钮建议的问题在于人们必须悬停在单选按钮上，这不是正常的行为。至于DIV标签，除非我像将所有这些单选按钮包装在DIV标签中，然后将组包装在父DIV标签中并给它一个ID，否则我会在整个站点上出现弹出窗口。然后迭代子DIV标签以分配弹出窗口。我正要这样做，但David的建议解决了问题。感谢您的帮助。 - Peter

3个回答

2

尝试使用以下方法添加正确的右边距：

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

- marcottsilva

1

你可以给元素添加 data-placement='left'。

- Eliseo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

似乎很难只样式化一个弹出框，并且正如Sara所提到的那样，没有偏移量这样的选项（你可以考虑使用qtip？）。但是，您可以使用未记录的template选项，该选项“派生”自tooltip选项（实际上，弹出框仅引入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。

更新-将整个弹出框向左偏移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>'
...