亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

?? ??? ??
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦 Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標題（Page Header） Bootstrap 字體圖標(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動監(jiān)聽（Scrollspy） Bootstrap 過渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
??

Bootstrap 提示工具（Tooltip）

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

如果您想要單獨引用該插件的功能，那么您需要引用 tooltip.js。或者，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

提示工具（Tooltip）插件根據(jù)需求生成內(nèi)容和標記，默認情況下是把提示工具（tooltip）放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加提示工具（tooltip）：

  • 通過 data 屬性：如需添加一個提示工具（tooltip），只需向一個錨標簽添加 data-toggle="tooltip" 即可。錨的 title 即為提示工具（tooltip）的文本。默認情況下，插件把提示工具（tooltip）設(shè)置在頂部。 
    <a?href="#"?data-toggle="tooltip"?title="Example?tooltip">請懸停在我的上面</a>
  • 通過 JavaScript：通過 JavaScript 觸發(fā)提示工具（tooltip）： 
    $('#identifier').tooltip(options)
提示工具（Tooltip）插件不像之前所討論的下拉菜單及其他插件那樣，它不是純 CSS 插件。如需使用該插件，您必須使用 jquery 激活它（讀取 javascript）。使用下面的腳本來啟用頁面中的所有的提示工具（tooltip）： 
$(function?()?{?$("[data-toggle='tooltip']").tooltip();?});

實例

下面的實例演示了通過 data 屬性使用提示工具（Tooltip）插件的用法。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?提示工具（Tooltip）插件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h4>提示工具（Tooltip）插件?-?錨</h4>
這是一個?<a?href="#"?class="tooltip-test"?data-toggle="tooltip"?
???title="默認的?Tooltip">
???默認的?Tooltip
</a>.
這是一個?<a?href="#"?class="tooltip-test"?data-toggle="tooltip"?
???data-placement="left"?title="左側(cè)的?Tooltip">
???左側(cè)的?Tooltip
</a>.
這是一個?<a?href="#"?data-toggle="tooltip"?data-placement="top"?
???title="頂部的?Tooltip">
???頂部的?Tooltip
</a>.
這是一個?<a?href="#"?data-toggle="tooltip"?data-placement="bottom"?
???title="底部的?Tooltip">
???底部的?Tooltip
</a>.
這是一個?<a?href="#"?data-toggle="tooltip"?data-placement="right"?
???title="右側(cè)的?Tooltip">
???右側(cè)的?Tooltip
</a>

<br>

<h4>提示工具（Tooltip）插件?-?按鈕</h4>
<button?type="button"?class="btn?btn-default"?data-toggle="tooltip"?
???title="默認的?Tooltip">
???默認的?Tooltip
</button>
<button?type="button"?class="btn?btn-default"?data-toggle="tooltip"?
???data-placement="left"?title="左側(cè)的?Tooltip">
???左側(cè)的?Tooltip
</button>
<button?type="button"?class="btn?btn-default"?data-toggle="tooltip"?
???data-placement="top"?title="頂部的?Tooltip">
???頂部的?Tooltip
</button>
<button?type="button"?class="btn?btn-default"?data-toggle="tooltip"?
???data-placement="bottom"?title="底部的?Tooltip">
???底部的?Tooltip
</button>
<button?type="button"?class="btn?btn-default"?data-toggle="tooltip"?
???data-placement="right"?title="右側(cè)的?Tooltip">
???右側(cè)的?Tooltip
</button>
<script>
???$(function?()?{?$("[data-toggle='tooltip']").tooltip();?});
</script>

</body>
</html>

結(jié)果如下所示：

提示工具（Tooltip）插件

選項

有一些選項是通過 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）添加或通過 JavaScript 調(diào)用的。下表列出了這些選項：

選項名稱 類型/默認值 Data 屬性名稱 描述
animation boolean
默認值：true 		data-animation 提示工具使用 CSS 漸變?yōu)V鏡效果。
html boolean
默認值：false 		data-html 向提示工具插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內(nèi)容。如果您擔心 XSS 攻擊，請使用 text。
placement string|function
默認值：top 		data-placement 規(guī)定如何定位提示工具（即 top|bottom|left|right|auto）。
當指定為 auto 時，會動態(tài)調(diào)整提示工具。例如，如果 placement 是 "auto left"，提示工具將會盡可能顯示在左邊，在情況不允許的情況下它才會顯示在右邊。
selector string
默認值：false 		data-selector 如果提供了一個選擇器，提示工具對象將被委派到指定的目標。
title string | function
默認值：'' 		data-title 如果未指定 title 屬性，則 title 選項是默認的 title 值。
trigger string
默認值：'hover focus' 		data-trigger 定義如何觸發(fā)提示工具： click| hover | focus | manual。您可以傳遞多個觸發(fā)器，每個觸發(fā)器之間用空格分隔。
content string | function
默認值：'' 		data-content 如果未指定 data-content 屬性，則使用默認的 content 值。
delay number | object
默認值：0 		data-delay 延遲顯示和隱藏提示工具的毫秒數(shù) - 對 manual 手動觸發(fā)類型不適用。如果提供的是一個數(shù)字，那么延遲將會應(yīng)用于顯示和隱藏。如果提供的是對象，結(jié)構(gòu)如下所示： 
delay:
{?show:?500,?hide:?100?}
container string | false
默認值：false 		data-container 向指定元素追加提示工具。
實例： container: 'body'

方法

下面是一些提示工具（Tooltip）插件中有用的方法：

方法 描述 實例
Options: .tooltip(options) 向元素集合附加提示工具句柄。 
$().tooltip(options)
Toggle: .tooltip('toggle') 切換顯示/隱藏元素的提示工具。 
$('#element').tooltip('toggle')
Show: .tooltip('show') 顯示元素的提示工具。 
$('#element').tooltip('show')
Hide: .tooltip('hide') 隱藏元素的提示工具。 
$('#element').tooltip('hide')
Destroy: .tooltip('destroy') 隱藏并銷毀元素的提示工具。 
$('#element').tooltip('destroy')

實例

下面的實例演示了提示工具（Tooltip）插件方法的用法。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?提示工具（Tooltip）插件方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?style="padding:?100px?100px?10px;">
???這是一個?<a?href="#"?class="tooltip-show"?data-toggle="tooltip"?
??????title="show">Tooltip?方法?show
???</a>.

???這是一個?<a?href="#"?class="tooltip-hide"?data-toggle="tooltip"?
??????data-placement="left"?title="hide">Tooltip?方法?hide
???</a>.

???這是一個?<a?href="#"?class="tooltip-destroy"?data-toggle="tooltip"?
??????data-placement="top"?title="destroy">Tooltip?方法?destroy
???</a>.

???這是一個?<a?href="#"?class="tooltip-toggle"?data-toggle="tooltip"?
??????data-placement="bottom"?title="toggle">Tooltip?方法?toggle
???</a>.
???<br><br><br><br><br><br>
???<p?class="tooltip-options"?>
??????這是一個?<a?href="#"?data-toggle="tooltip"?title="<h2>'am?Header2
?????????</h2>">Tooltip?方法?options
??????</a>.
???</p>

???<script>
??????$(function?()?{?$('.tooltip-show').tooltip('show');});
??????$(function?()?{?$('.tooltip-hide').tooltip('hide');});
??????$(function?()?{?$('.tooltip-destroy').tooltip('destroy');});
??????$(function?()?{?$('.tooltip-toggle').tooltip('toggle');});
??????$(function?()?{?$(".tooltip-options?a").tooltip({html?:?true?});
??????});
???</script>
<div>

</body>
</html>

結(jié)果如下所示：

提示工具（Tooltip）插件方法

事件

下表列出了提示工具（Tooltip）插件中要用到的事件。這些事件可在函數(shù)中當鉤子使用。

事件 描述 實例
show.bs.tooltip 當調(diào)用 show 實例方法時立即觸發(fā)該事件。 
$('#myTooltip').on('show.bs.tooltip',?function?()?{
??//?執(zhí)行一些動作...
})
shown.bs.tooltip 當提示工具對用戶可見時觸發(fā)該事件（將等待 CSS 過渡效果完成）。 
$('#myTooltip').on('shown.bs.tooltip',?function?()?{
??//?執(zhí)行一些動作...
})
hide.bs.tooltip 當調(diào)用 hide 實例方法時立即觸發(fā)該事件。 
$('#myTooltip').on('hide.bs.tooltip',?function?()?{
??//?執(zhí)行一些動作...
})
hidden.bs.tooltip 當提示工具對用戶隱藏時觸發(fā)該事件（將等待 CSS 過渡效果完成）。 
$('#myTooltip').on('hidden.bs.tooltip',?function?()?{
??//?執(zhí)行一些動作...
})

實例

下面的實例演示了提示工具（Tooltip）插件事件的用法。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?提示工具（Tooltip）插件事件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h4>提示工具（Tooltip）插件?-?錨</h4>
這是一個?<a?href="#"?class="tooltip-show"?data-toggle="tooltip"?
???title="默認的?Tooltip">默認的?Tooltip
</a>.

<script>
$(function?()?{?$('.tooltip-show').tooltip('show');});
$(function?()?{?$('.tooltip-show').on('show.bs.tooltip',?function?()?{
???alert("Alert?message?on?show");
})});
</script>

</body>
</html>

結(jié)果如下所示：

提示工具（Tooltip）插件事件
?? ??： ?? ??：