Bootstrap框架中的tooltip的插件提供了四種不同的風格：

提示信息在左邊：

在Bootstrap框架中的提示框，結構非常簡單，常常使用的是按鈕<button>標簽或者鏈接<a>標簽來制作。不管是使用按鈕還是鏈接來制作提示框，他們都有一個共性：

• 通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設置提示信息)。
• 通過 data-placement 自定義屬性來控制提示信息框的位置，根據四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現的位置在頂部、右邊、底部和左邊。
• 還有一個最重要的參數不可缺少，data-toggle="tooltip"。

如下所示：

<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="left" 
        data-original-title="提示框居左">
        提示框居左
</button>
<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="top" 
        data-original-title="提示框在頂部">
        提示框在頂部
</button>
<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="bottom" 
        data-original-title="提示框在底部">
        提示框在底部
</button>
<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="right" 
        data-original-title="提示框居右">
        提示框居右
</button>

需要特別注意的是：

1、如果同時設置了 data-original-title 和 title 定義提示信息，那么 data-original-title 的優先級要高于 title。只有 data-original-title 值為空時，才會取 title 的值做為提示信息的內容。

2、Bootstrap框架中的提示框的觸發方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發。必須得依賴于JavaScript的代碼觸發。（所以右側代碼是沒有動畫效果的，不要著急，后面小節會有講解。）