溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下bootstrap中如何實現(xiàn)工具提示，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
Bootstrap 工具提示（Tooltip）插件 當(dāng)您想要描述一個鏈接的時候，工具提示（Tooltip）就顯得非常有用。工具提示（Tooltip）插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發(fā)。工具提示（Tooltip）插件做了很多改進(jìn)，例如不需要依賴圖像，而是改用 CSS 實現(xiàn)動畫效果，用 data 屬性存儲標(biāo)題信息。
工具提示實現(xiàn)代碼如下所示：
<!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 >
<!--系統(tǒng)默認(rèn)提示-->
<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="默認(rèn)提示">系統(tǒng)默認(rèn)</a>
<!--bootstrop的工具提示，還需要寫jQuery才能實現(xiàn)-->
<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默認(rèn) true，在 tooltip 上應(yīng)用一個 CSS fade 動畫。
如果設(shè)置 false，則不應(yīng)用。-->
<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默認(rèn) false，不允許提示內(nèi)容格式為 html。如果設(shè)置
為 true，則可以設(shè)置 html 格式的提示內(nèi)容。-->
<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默認(rèn)值 top，還有 bottom、left、right 和 auto。
如果 auto 會自行調(diào)整合適的位置， 如果是 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默認(rèn)值 hover foucs，表示怎么觸發(fā) tooltip，其
他值為： click、 manual。多個值用空格隔開， manual
手動不能和其他同時設(shè)置。-->
<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默認(rèn)值 0，延遲觸發(fā) tooltip(毫秒)，如果傳數(shù)字則，
表示 show/hide 的毫秒數(shù)，如果傳對象，結(jié)構(gòu)為：{show:500,hide:100}這個要在jQuery中才能實現(xiàn)-->
<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 提示語的模版，默認(rèn)值為：<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默認(rèn) false，可以選擇綁定指定的選擇器。必須要用它的父類才能實現(xiàn)，使用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>
<!--使用按鈕組，給工具提示暫用的地方很小，所以提示會被擠壓變形，按鈕也會被擠動，所以、
應(yīng)該分配更大的空間給提示來顯示-->
<!--data-container默認(rèn)值 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 在提示框顯示前立即觸發(fā)
shown.bs.tooltip 在提示框完全顯示給用戶之后觸發(fā)
hide.bs.tooltip 在提示框隱藏前立即觸發(fā)
hidden.bs.tooltip 在提示框完全隱藏之后觸發(fā)
* */
$('a').on('show.bs.tooltip', function () {
alert('在提示框顯示前立即觸發(fā)');
});
</script>
</body>
</html>以上是“bootstrap中如何實現(xiàn)工具提示”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼