左定位一个 Bootstrap 弹出框答案

【问题标题】：Left-Positioning A Bootstrap Popover左定位一个 Bootstrap 弹出框
【发布时间】：2012-10-25 14:30:19
【问题描述】：

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

 $('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;
}

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

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

谢谢。

【问题讨论】：

我必须在几分钟后离开，直到今天晚些时候回家，我才有时间在 JS fiddle 上发帖。谢谢你的帮助。同时，我已经发布了我的 HTML
请注意，popover documentation 并未将offset 列为选项。
啊，是的，谢谢莎拉。通过在线查看某人的代码而不是文档来为我服务。
您是否尝试过更改弹出框的目标？即不要将它附加到标签上（因为它按预期工作以覆盖单选按钮），而是将其附加到单选按钮本身，甚至是覆盖整个结构的 div？
感谢米卡的建议。单选按钮建议的问题是人们必须将鼠标悬停在收音机上，这不是正常行为。至于 DIV 标签，我会在整个网站上出现弹出框，除非我做一些事情，比如将所有这些收音机包装在 DIV 标签中，然后将组包装在父 DIV 标签中并给它一个 ID。然后遍历子 DIV 标记以分配弹出框。我正要这样做，但大卫的建议成功了。感谢您的帮助。

标签： css twitter-bootstrap popover

【解决方案1】：

设置单个弹出框的样式似乎是不可能的，而且 - 正如 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而被修改，但如果您愿意，可以在没有 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>'
...

【讨论】：

嗨，大卫。谢谢你的评论，我真的很感激。我尝试了您的建议，但这将箭头放在两个单选按钮的中间，这并不理想（我在页面上垂直堆叠了 20 个单选按钮）。我真的需要将整个 popover + 箭头（如 5/10 px）推到标签的左侧（暴露箭头隐藏的单选按钮）。还有其他想法吗？
是的，请参阅更新。当箭头的行为如此时，它表明您已经为弹出框设置了样式，或者如果我复制/粘贴您的 HTML，弹出框没有它们变得那么高。我的测试基于干净/“新鲜”的 TB。
谢谢大卫！那很完美。我按照你的建议做了，但正在尝试正确的边距。再次感谢！

【解决方案2】：

试试这个添加右边距：

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

【讨论】：

【解决方案3】：

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

【讨论】：