bootstrap的工具提示執行個體代碼，bootstrap執行個體代碼

bootstrap的工具提示執行個體代碼，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 style="margin: 200px;"> <!--系統預設提示--> <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>