受到 Jason Frame 開(kāi)發(fā)的 jQuery.tipsy 插件的啟發(fā)，Bootstrap 才把這個(gè)工具提示插件做的更好，而且此插件不依賴(lài)圖片，只是使用 CSS3 來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，并使用 data 屬性存儲(chǔ)標(biāo)題。

將鼠標(biāo)懸停在按鈕、文本框、鏈接等等一些基本控件上就可以看到提示了，先上一個(gè)效果圖

http://wiki.jikexueyuan.com/project/bootstrap/images/bt1.gif" alt="" />

主要實(shí)現(xiàn)了按鈕的上下左右的 ToolTip，然后是文本框和鏈接的 ToolTip。

<div class="container" style="margin-top:40px;"> <div class="bs-example tooltip-demo"> <div class="bs-example-tooltips"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左側(cè)Tooltip</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上方Tooltip</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下方Tooltip</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右側(cè)Tooltip</button> </div> </div> <input type="text" id="testt" rel="tooltip" title="123456" /> <a href="#" data-toggle="tooltip" title="Default tooltip" >dsafsdfasdfasdfasd</a> </div>

在按鈕上添加 data-toggle="tooltip" 的屬性來(lái)開(kāi)啟它的工具提示功能，然后指定 data-placement="left" 工具提示的位置，可以是上下左右（top、bottom、left、right）。 選擇性加入的功能

出于性能方面的考慮，工具提示和彈框組件的 data 屬性 api 是選擇性加入的，也就是說(shuō)你必須自己初始化他們。

因此針對(duì)上述六個(gè)控件，我們需要初始化它們，我們是通過(guò) jQuery 的初始化事件進(jìn)行的

 <script type="text/javascript"> $(function() {
     $('.tooltip-demo').tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body" })
    $("#testt").tooltip({})
    $('a').tooltip()
}) </script>

按鈕、文本框、鏈接三種不同的控件的實(shí)現(xiàn)初始化稍微有點(diǎn)不同。

工具提示與按鈕組和輸入框組聯(lián)合使用時(shí)需要一些特殊設(shè)置

在 .btn-group 或 .input-group 內(nèi)的元素上使用工具提示時(shí)，你需要指定 container: 'body' 選項(xiàng)以避免不需要的副作用（例如，當(dāng)工具提示顯示之后，與其合作的頁(yè)面元素可能變得更寬或是去圓角）。

在禁止使用的頁(yè)面元素上使用工具提示時(shí)需要額外增加一個(gè)元素將其包裹起來(lái)

為了給 disabled 或 .disabled 元素添加工具提示，將需要增加工具提示的頁(yè)面元素包裹在一個(gè) <div> 中，然后對(duì)這個(gè) <div> 元素應(yīng)用工具提示。

用法

通過(guò) JavaScript 激活工具提示：上面也已經(jīng)使用過(guò)了。

$('#example').tooltip(options)

選項(xiàng)

http://wiki.jikexueyuan.com/project/bootstrap/images/bt2.png" alt="" />

對(duì)單個(gè)工具提示使用 data 屬性。

使用 data 屬性可以為單個(gè)工具提示指定額外選項(xiàng)，如下所示。

標(biāo)記

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

方法

$().tooltip(options)——為一組元素應(yīng)用工具提示。

.tooltip('show')——展示工具提示。

$('#element').tooltip('show')

.tooltip('hide')——隱藏工具提示。

$('#element').tooltip('hide')

.tooltip('toggle')——展示或隱藏工具提示。

$('#element').tooltip('toggle')

.tooltip('destroy')——隱藏并銷(xiāo)毀工具提示。

$('#element').tooltip('destroy')

事件

http://wiki.jikexueyuan.com/project/bootstrap/images/bt3.png" alt="" />

 $('.tooltip-demo').on('hidden.bs.tooltip', function () {
        alert(1);
    })