快捷導(dǎo)航

bootstrap的工具提示實(shí)例代碼

更新時(shí)間：2017年05月17日 08:40:29 作者：YY小蘋果

Bootstrap 工具提示（Tooltip）插件當(dāng)您想要描述一個(gè)鏈接的時(shí)候，工具提示（Tooltip）就顯得非常有用。這篇文章通過實(shí)例代碼給大家介紹bootstrap的工具提示功能，需要的朋友參考下吧

Bootstrap 工具提示（Tooltip）插件當(dāng)您想要描述一個(gè)鏈接的時(shí)候，工具提示（Tooltip）就顯得非常有用。工具提示（Tooltip）插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發(fā)。工具提示（Tooltip）插件做了很多改進(jìn)，例如不需要依賴圖像，而是改用 CSS 實(shí)現(xiàn)動(dòng)畫效果，用 data 屬性存儲(chǔ)標(biāo)題信息。

工具提示實(shí)現(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 style="margin: 200px;"> 
<!--系統(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才能實(shí)現(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)用一個(gè) CSS fade 動(dòng)畫。 
如果設(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 會(huì)自行調(diào)整合適的位置， 如果是 auto left 
則會(huì)盡量在左邊顯示，但左邊不行就靠右邊。--> 
<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。多個(gè)值用空格隔開， manual 
手動(dòng)不能和其他同時(shí)設(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ù)，如果傳對(duì)象，結(jié)構(gòu)為：{show:500,hide:100}這個(gè)要在jQuery中才能實(shí)現(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 提示語(yǔ)的模版，默認(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，可以選擇綁定指定的選擇器。必須要用它的父類才能實(shí)現(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> 
<!--使用按鈕組，給工具提示暫用的地方很小，所以提示會(huì)被擠壓變形，按鈕也會(huì)被擠動(dòng)，所以、 
應(yīng)該分配更大的空間給提示來(lái)顯示--> 
<!--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="點(diǎn)擊彈出提示" data-toggle="tooltip" id="clc">點(diǎn)擊彈出提示</a> 
<button class="btn btn-default" id="btn">點(diǎn)擊彈出或隱藏提示</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個(gè)事件 
  * 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>

您可能感興趣的文章: