tooltip是bootstrap第二複雜的組件，近三百行。配置項比較多。並且需要手動初始化。另一個特點是沒有自訂事件。
| 名稱 | 類型 | 預設 | 描述 |
|---|---|---|---|
| animation | 布爾值 | true | 為工具提示添加一個淡入的過渡。 |
| placement | 字串或函數 | 'top' | 工具提示的位置：top | bottom | left | right。 |
| selector | 字串 | false | 如果提供了selector，將對合格某個或多個元素啟用工具提示。 |
| title | 字串或函數 | '' | 如果'title'屬性不存在的話，就使用該值做為預設的標題。 |
| trigger | 字串 | 'hover' | 工具提示的觸發方式：滑鼠經過(hover) | 獲得焦點(focus) | 手動觸發(manual) |
| delay | 數字或對象 | 0 | 顯示和隱藏時的延遲時間(以毫秒計) 如果提供的是一個數字，延遲就會同時被應用到顯示和隱藏。 如果是一個對象，其結構就是: |
一般來說它是用於內嵌元素，連結或圖片什麼的，通過把其title抽取出來構成浮動提示層。比如下面的HTML結構：
<p class="muted" style="margin-bottom: 0;"> “這是我的第一次英文訪問,很抱歉它不夠嚴謹,但是我不得不這麼做,不只因為採訪時間限制，更因為我面對的是卡梅隆，這個人喜愛挑戰、從無畏懼，他也希望別人如此，他可以原諒不完美，但他無法接受一個人不去努力接近自己的極限。” ——<a href="#" rel="tooltip" data-original-title="柴靜始終站在離新聞最近的地方，她以她的犀利和敏銳、堅定與堅持，最終曆練成為一名優秀的新聞工作者。 ">柴靜</a>《看見》專訪<a href="#" rel="tooltip" data-original-title="1954年8月16日生於加拿大的著名電影導演，擅長拍攝動作片以及科幻電影。">卡梅隆</a> </p>
使用如下：
$('.muted a').tooltip({ placement:"bottom" })
</p><p><!DOCTYPE html><br /><html><br /> <head><br /> <title>bootstrap學習 by 司徒正美</title><br /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"></p><p> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/><br /> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script><br /> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script><br /> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-tooltip.js"></script></p><p> <script ><br /> $(function () {<br /> var log = function(s){<br /> window.console && console.log(s)<br /> }<br /> $('.muted a').tooltip({<br /> placement:"bottom"<br /> })<br /> })<br /> </script><br /> <script></p><p> </script><br /> </head><br /> <body></p><p> <p class="muted" style="margin-bottom: 0;"><br /> “這是我的第一次英文訪問,很抱歉它不夠嚴謹,但是我不得不這麼做,不只因為採訪時間限制，更因為我面對的是卡梅隆，這個人喜愛挑戰、從無畏懼，他也希望別人如此，他可以原諒不完美，但他無法接受一個人不去努力接近自己的極限。”<br /> ——<a href="#" rel="tooltip" data-original-title="柴靜始終站在離新聞最近的地方，她以她的犀利和敏銳、堅定與堅持，最終曆練成為一名優秀的新聞工作者。 ">柴靜</a>《看見》專訪<a href="#" rel="tooltip" data-original-title="1954年8月16日生於加拿大的著名電影導演，擅長拍攝動作片以及科幻電影。">卡梅隆</a><br /> </p></p><p> </body><br /></html><br />
運行代碼
它對應的LESS這tooltip.less。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
