簡單回憶一下，在制作提示框（tooltip）時，可以使用<button>或者<a>標簽元素，而且通過 data- 屬性來聲明提示框的信息，如下所示：

<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="left" 
        data-original-title="我是一個提示框tooltip">
        鼠標移上來
</button>

而彈出框Popover和提示框tooltip相比，就多了一個content內容，那么在此使用 data-content 來定義彈出框中的內容。同樣可以使用<button>或者<a>標簽來制作，如下：

<button type="button" 
        class="btnbtn-default" 
        data-container="body" 
        data-placement="bottom" 
        data-toggle="popover" 
        data-original-title="Bootstrap彈出框標題" 
        data-content="Bootstrap彈出框的內容" >
        猛擊我吧
</button>
<a href="#" class="btnbtn-default" 
        data-container="body" 
        data-placement="right" 
        data-toggle="popover" 
        title="Bootstrap彈出框標題" 
        data-content="Bootstrap彈出框的內容">
        猛擊我吧
</a>

運行效果如下：
 
正如上圖所示，彈出框的制作結構和提示框并無太多差別，但樣式風格上還是有蠻大的區別。其主要定義了彈出框邊框、圓角、背景、陰影以及三角形等樣式：具體代碼見右側的bootstrap.css。