左定位--助力带波波夫

Question

我有一个出现在标签左边的爆米花：

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

弹出器目前正在阻塞一个单选按钮，我想把它向左移动，比如说，10 it。我好像想不出该怎么做。偏移似乎什么也做不了(如果我加上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位置：

.popover {
    left: 380px !important;
}

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

在这里，必须是一种增加一个小的右边距的方法，对吗？

谢谢。

Answer 1

这似乎是不可能的风格单一的波普，而且--正如萨拉提到的-没有像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的情况下进行样式设置，那些没有单选按钮的可能不需要。

更新样式的整个弹出窗口左侧+10 to

...
 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

可以将数据放置=“左”添加到元素中。