如何使Bootstrap popover出現在不同的div旁邊？

Question

我想使用Bootstrap在我指定的div旁邊創建彈出窗口。

Bootstrap documentation建議我爲此使用數據容器html屬性。像這樣：data-container =「my-div」。

所以我首先定義的div，我想酥料餅的旁邊出現：

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

然後是酥料​​餅的觸發按鈕，數據容器指向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，但在#hello元素中有popover內容？

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>內的東西取代「地方」，如「頂」，「左」等