Bootstrap框架中的tooltip的插件提供了四種不同的風(fēng)格：

提示信息在左邊：

在Bootstrap框架中的提示框，結(jié)構(gòu)非常簡(jiǎn)單，常常使用的是按鈕<button>標(biāo)簽或者鏈接<a>標(biāo)簽來(lái)制作。不管是使用按鈕還是鏈接來(lái)制作提示框，他們都有一個(gè)共性：

• 通過(guò) title 屬性的值來(lái)定義提示信息(也可以使用自定義屬性 data-original-title 來(lái)設(shè)置提示信息)。
• 通過(guò) data-placement 自定義屬性來(lái)控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個(gè)值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。
• 還有一個(gè)最重要的參數(shù)不可缺少，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、如果同時(shí)設(shè)置了 data-original-title 和 title 定義提示信息，那么 data-original-title 的優(yōu)先級(jí)要高于 title。只有 data-original-title 值為空時(shí)，才會(huì)取 title 的值做為提示信息的內(nèi)容。

2、Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過(guò)自定義的屬性 data- 來(lái)觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)。（所以右側(cè)代碼是沒(méi)有動(dòng)畫效果的，不要著急，后面小節(jié)會(huì)有講解。）