工具提示插件（Tooltip Plugin）

优质

小牛编辑

139浏览

2023-12-01

当您需要描述链接时，工具提示很有用。该插件的灵感来自Jason Frame编写的jQuery.tipsy插件。从那时起，工具提示已更新为无图像，使用CSS动画制作动画，以及本地标题存储的数据属性。

如果您想单独包含此插件功能，那么您将需要tooltip.js 。另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法 (Usage)

工具提示插件会根据需要生成内容和标记，默认情况下会在触发元素后面放置工具提示。您可以通过以下两种方式添加工具提示 -

Via data attributes - 要添加工具提示，请将data-toggle = "tooltip"到锚标记。锚点的标题将是工具提示的文本。默认情况下，插件将工具提示设置为顶部。

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

Via JavaScript - Via JavaScript触发工具提示 -

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

Tooltip插件不仅仅是下拉式插件或前面章节中讨论的其他插件。要使用此插件，您必须使用jquery（读取javascript）激活它。要启用页面上的所有工具提示，只需使用此脚本 -
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

例子 (Example)

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

<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>

选项 (Options)

某些选项可以通过Bootstrap Data API添加或通过JavaScript调用。下表列出了选项 -

选项名称	类型/默认值	数据属性名称	描述
animation	boolean Default: true	data-animation	将CSS淡入淡出过渡应用于工具提示。
html	boolean Default: false	data-html	将HTML插入工具提示。如果为false，则使用jQuery的文本方法将内容插入到dom中。如果您担心XSS攻击，请使用文本。
placement	string \| function Default: top	data-placement	指定如何定位工具提示（即top \| bottom \| left \| right \| auto）。指定auto ，它将动态重新定向工具提示。例如，如果展示位置为“自动离开”，则工具提示会尽可能显示在左侧，否则它将显示正确。
selector	string Default: false	data-selector	如果提供了选择器，则工具提示对象将委派给指定的目标。
title	字符串\| 功能Default: "	data-title	如果title属性不存在，则title选项是默认标题值。
trigger	字符串Default: 'hover focus'	data-trigger	定义触发工具提示的方式: click\| hover \| focus \| manual click\| hover \| focus \| manual click\| hover \| focus \| manual 。你可以传递多个触发器; 用空格隔开它们。
content	字符串\| 功能Default: ''	data-content	如果不存在data-content属性，则为默认内容值
delay	号码\| 对象Default: 0	data-delay	以毫秒显示和隐藏工具提示的延迟 - 不适用于手动触发类型。如果提供了数字，则延迟将应用于隐藏/显示。对象结构是 - `delay: { show: 500, hide: 100 }`
container	字符串\| false Default: false	data-container	将工具提示附加到特定元素。示例:container:'body'

方法 (Methods)

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

方法	描述	例
Options - .tooltip（选项）	将工具提示处理程序附加到元素集合。	`$().tooltip(options)`
Toggle - .tooltip（'切换'）	切换元素的工具提示。	`$('#element').tooltip('toggle')`
Show - .tooltip（'show'）	显示元素的工具提示。	`$('#element').tooltip('show')`
Hide - .tooltip（'隐藏'）	隐藏元素的工具提示。	`$('#element').tooltip('hide')`
Destroy - .tooltip（'毁灭'）	隐藏和销毁元素的工具提示。	`$('#element').tooltip('destroy')`

例子 (Example)

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

<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>

事件 (Events)

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

事件	描述	例
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 })`

例子 (Example)

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

<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>