Bootstrap - Tooltip 插件

上一页
下一页

当您需要描述链接时，工具提示非常有用。该插件的灵感来自 Jason Frame 编写的 jQuery.tipsy 插件。工具提示此后已更新，无需使用图像即可工作，使用 CSS 动画进行动画处理，以及用于本地标题存储的数据属性。

如果您想单独包含此插件功能，则需要 tooltip.js。否则，如Bootstrap 插件概述章节所述，您可以包含 bootstrap.js 或压缩版 bootstrap.min.js。

用法

工具提示插件按需生成内容和标记，默认情况下将其放置在触发元素之后。您可以通过以下两种方式添加工具提示：

  • 通过数据属性 - 要添加工具提示，请将 data-toggle = "tooltip" 添加到锚标记。锚的标题将是工具提示的文本。默认情况下，工具提示由插件设置为顶部。

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

  • 通过 JavaScript - 通过 JavaScript 触发工具提示 -

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

工具提示插件与之前章节中讨论的下拉菜单或其他插件不同，它不是仅使用 CSS 的插件。要使用此插件，您必须使用 jQuery（读取 JavaScript）激活它。要启用页面上的所有工具提示，只需使用此脚本即可：

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

示例

以下示例演示了如何通过数据属性使用工具提示插件。

在线演示 
<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

选项

可以通过 Bootstrap 数据 API 或通过 JavaScript 调用添加某些选项。下表列出了这些选项：

选项名称 类型/默认值 数据属性名称 描述
animation 布尔值 默认：true data-animation 将 CSS 淡入淡出过渡应用于工具提示。
html 布尔值 默认：false data-html 将 HTML 插入工具提示。如果为 false，则 jQuery 的 text 方法将用于将内容插入 DOM。如果您担心 XSS 攻击，请使用 text。
placement 字符串|函数 默认：top data-placement

指定如何定位工具提示（即，top|bottom|left|right|auto）。

当指定 auto 时，它将动态重新定位工具提示。例如，如果 placement 为“auto left”，则工具提示将在可能的情况下显示在左侧，否则将显示在右侧。
selector 字符串 默认：false data-selector 如果提供了选择器，则工具提示对象将被委托给指定的目标。
title 字符串 | 函数 默认：“ data-title 如果 title 属性不存在，则 title 选项是默认标题值。
trigger 字符串 默认：'hover focus' data-trigger 定义如何触发工具提示：click| hover | focus | manual。您可以传递多个触发器；用空格分隔它们。
content 字符串 | 函数 默认：'' data-content 如果 data-content 属性不存在，则为默认内容值
delay 数字 | 对象 默认：0 data-delay

以毫秒为单位延迟显示和隐藏工具提示 - 不适用于手动触发类型。如果提供数字，则延迟将应用于隐藏/显示。对象结构为：

delay: { show: 500, hide: 100 }
container 字符串 | false 默认：false data-container 将工具提示附加到特定元素。例如：container: 'body'

方法

以下是工具提示的一些有用方法：

方法 描述 示例

选项 - .tooltip(options)

 将工具提示处理程序附加到元素集合。 
$().tooltip(options)

切换 - .tooltip('toggle')

 切换元素的工具提示。 
$('#element').tooltip('toggle')

显示 - .tooltip('show')

 显示元素的工具提示。 
$('#element').tooltip('show')

隐藏 - .tooltip('hide')

 隐藏元素的工具提示。 
$('#element').tooltip('hide')

销毁 - .tooltip('destroy')

 隐藏并销毁元素的工具提示。 
$('#element').tooltip('destroy')

示例

以下示例演示了如何通过数据属性使用工具提示插件。

在线演示 
<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method 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>

事件

下表列出了用于处理工具提示插件的事件。此事件可用于挂钩到函数中。

事件 描述 示例
show.bs.tooltip 当调用 show 实例方法时，此事件会立即触发。 
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
shown.bs.tooltip 当工具提示已对用户可见时（将等待 CSS 过渡完成），此事件将触发。 
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip 当调用 hide 实例方法时，此事件会立即触发。 
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltip 当工具提示已完成对用户的隐藏（将等待 CSS 过渡完成），此事件将触发。 
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

示例

以下示例演示了如何通过数据属性使用工具提示插件。

在线演示 
<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>
打印页面
上一页
下一页
广告