Question

我想使用Bootstrap在我指定的div旁边创建一个popover。

Bootstrap documentation建议我为此目的使用data-container html属性。像：data-container =“my-div”。

所以我首先定义div，我希望popover出现在：

旁边

<div id="hello">
   I'd like for the popover to show next to this.
</div>

然后是popover触发按钮，数据容器指向div的hello id：

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Creativity Tuts" data-container="#hello">pop
</a>

然而，我无法让它发挥作用。弹出窗口一直显示在按钮旁边。

这是fiddle。

Answer 1

是否可以选择从该按钮触发popover，但popover元素中包含#hello个内容？

Demo

HTML：

<p>Click on button to see Popover</p>
<a href="#" id="example" class="btn btn-primary">pop
</a>
<br/><br/>
<br/><br/>
<div id="hello" data-content="This is the body of Popover"
   data-original-title="Creativity Tuts" rel="popover">
   I'd like for the popover to show next to this.
</div>

使用Javascript：

$(function () {
    $('#example').click(function() {
        $('#hello').popover('show');
    });
});

CSS：

#hello {
 float:left;
}

Answer 2

默认情况下，弹出窗口显示在元素的右侧。您可能希望将data-placement="place"放在<a>中，用“顶部”，“左侧”等替换“地点”等。

如何使Bootstrap popover出现在不同的div旁边？

2 个答案: