最新的Web開發教程
 

Bootstrap提示插件


該工具提示插件

該工具提示插件是當用戶在一個元素上移動鼠標指針出現小幅彈出對話框:

將鼠標懸停在我

提示:插件可以單獨包括(用Bootstrap's個體"tooltip.js"文件),或一次(使用"bootstrap.js""bootstrap.min.js"


如何創建一個工具提示

要創建一個提示,添加data-toggle="tooltip"屬性的元素。

使用title屬性來指定要在工具提示裡面顯示的文本:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

注:必須的工具提示使用jQuery初始化:選擇指定的元素,並調用tooltip()方法。

下面的代碼將使文檔中的所有工具提示:

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
試一試»

定位工具提示

默認情況下,工具提示將顯示在元件的頂部。

使用data-placement屬性來設置在頂部,底部工具提示,左側或元件的右側的位置:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
試一試»

提示:您還可以使用data-placement屬性與“自動”的值,這將讓瀏覽器決定工具提示的位置。 例如,如果值是"auto left" ,工具提示將顯示在左側可能時,否則在右邊。


完成引導工具提示參考

有關所有提示選項,方法和事件的完整參考,請訪問我們的引導JS工具提示參考