溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下bootstrap中如何實現工具提示，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
Bootstrap 工具提示（Tooltip）插件 當您想要描述一個鏈接的時候，工具提示（Tooltip）就顯得非常有用。工具提示（Tooltip）插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發。工具提示（Tooltip）插件做了很多改進，例如不需要依賴圖像，而是改用 CSS 實現動畫效果，用 data 屬性存儲標題信息。
工具提示實現代碼如下所示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>XXX</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" >
<link rel="stylesheet" href="css/main.css" rel="external nofollow" >
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body >
<!--系統默認提示-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="默認提示">系統默認</a>
<!--bootstrop的工具提示，還需要寫jQuery才能實現-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bootstrop提示" data-toggle="tooltip">bootstrop的工具提示</a>
<!--data-animation默認 true，在 tooltip 上應用一個 CSS fade 動畫。
如果設置 false，則不應用。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="animation" data-toggle="tooltip" data-animation="false">data-animation</a>
<!--data-html默認 false，不允許提示內容格式為 html。如果設置
為 true，則可以設置 html 格式的提示內容。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="<b>html</b>" data-toggle="tooltip" data-html="true">data-html</a>
<!--data-placement默認值 top，還有 bottom、left、right 和 auto。
如果 auto 會自行調整合適的位置， 如果是 auto left
則會盡量在左邊顯示，但左邊不行就靠右邊。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="placement" data-toggle="tooltip" data-placement="bottom">data-placement</a>
<!--data-trigger默認值 hover foucs，表示怎么觸發 tooltip，其
他值為： click、 manual。多個值用空格隔開， manual
手動不能和其他同時設置。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="trigger" data-toggle="tooltip" data-trigger="click">data-trigger</a>
<!--data-delay默認值 0，延遲觸發 tooltip(毫秒)，如果傳數字則，
表示 show/hide 的毫秒數，如果傳對象，結構為：{show:500,hide:100}這個要在jQuery中才能實現-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="delay" data-toggle="tooltip" data-delay="2000">data-delay</a>
<!--data-template更改提示框的 HTML 提示語的模版，默認值為：<div
class='tooltip'><div
class='tooltip-arrow'></div><div
class='tooltip-inner'></div></div>。-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="template" data-toggle="tooltip" data-template="<b>123<b/>">data-template</a>
<br>
<br>
<br>
<!--data-selector默認 false，可以選擇綁定指定的選擇器。必須要用它的父類才能實現，使用jQuery-->
<div id="selection">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="綁定選擇器" rel="tooltip" data-toggle="tooltip">綁定選擇器</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="綁定選擇器" data-toggle="tooltip">綁定選擇器</a>
</div>
<br>
<br>
<br>
<!--使用按鈕組，給工具提示暫用的地方很小，所以提示會被擠壓變形，按鈕也會被擠動，所以、
應該分配更大的空間給提示來顯示-->
<!--data-container默認值 false，將 tooltip 附加到特定的元素上。比
如組合按鈕組提示，容器不夠，可以附加 body 上。
container : 'body',需要使用jQuery-->
<div class="btn-group">
<button class="btn btn-default" title="按鈕" data-toggle="tooltip">1</button>
<button class="btn btn-default" title="按鈕" data-toggle="tooltip">2</button>
<button class="btn btn-default" title="按鈕" data-toggle="tooltip">3</button>
</div>
<br>
<br>
<br>
<br>
<!--其他show、hide、toggle 和 destroy 四種方法-->
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="點擊彈出提示" data-toggle="tooltip" id="clc">點擊彈出提示</a>
<button class="btn btn-default" id="btn">點擊彈出或隱藏提示</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
// $('a').tooltip();
/*selector*/
$('#selection').tooltip({
selector: 'a[rel=tooltip]'
});
/*container*/
$('button').tooltip({
delay: {
show: 100,
hide: 100
},
container: 'body'
});
/*其他方法*/
$('#clc').tooltip({
trigger:'click'
});
$('#btn').on('click', function () {
$('#clc').tooltip('show');
/* $('#clc').tooltip('hide');
$('#clc').tooltip('toggle');
$('#clc').tooltip('destory');*/
});
/*4個事件
* show.bs.tooltip 在提示框顯示前立即觸發
shown.bs.tooltip 在提示框完全顯示給用戶之后觸發
hide.bs.tooltip 在提示框隱藏前立即觸發
hidden.bs.tooltip 在提示框完全隱藏之后觸發
* */
$('a').on('show.bs.tooltip', function () {
alert('在提示框顯示前立即觸發');
});
</script>
</body>
</html>以上是“bootstrap中如何實現工具提示”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
