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

directory search
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)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(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 編輯器
characters

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)題信息。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 tooltip.js?；蛘撸?Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

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

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

實(shí)例

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

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?提示工具（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>
這是一個(gè)?<a?href="#"?class="tooltip-test"?data-toggle="tooltip"?
???title="默認(rèn)的?Tooltip">
???默認(rèn)的?Tooltip
</a>.
這是一個(gè)?<a?href="#"?class="tooltip-test"?data-toggle="tooltip"?
???data-placement="left"?title="左側(cè)的?Tooltip">
???左側(cè)的?Tooltip
</a>.
這是一個(gè)?<a?href="#"?data-toggle="tooltip"?data-placement="top"?
???title="頂部的?Tooltip">
???頂部的?Tooltip
</a>.
這是一個(gè)?<a?href="#"?data-toggle="tooltip"?data-placement="bottom"?
???title="底部的?Tooltip">
???底部的?Tooltip
</a>.
這是一個(gè)?<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="默認(rèn)的?Tooltip">
???默認(rèn)的?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）插件

選項(xiàng)

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

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

方法

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

方法 描述 實(shí)例
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')

實(shí)例

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

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?提示工具（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;">
???這是一個(gè)?<a?href="#"?class="tooltip-show"?data-toggle="tooltip"?
??????title="show">Tooltip?方法?show
???</a>.

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

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

???這是一個(gè)?<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"?>
??????這是一個(gè)?<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ù)中當(dāng)鉤子使用。

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

實(shí)例

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

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?提示工具（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>
這是一個(gè)?<a?href="#"?class="tooltip-show"?data-toggle="tooltip"?
???title="默認(rèn)的?Tooltip">默認(rèn)的?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）插件事件
Previous article： Next article：