Bootstrap Tips Tool (Tooltip) plug-in


May 04, 2021 09:00 Bootstrap


Table of contents


Bootstrap Tips Tool (Tooltip) plug-in

The Bootstrap Prompt Tool (Tooltip) plug-in tool displays relevant cues when it can be mouse-moved to a selected specific element.

Tooltip is useful when you want to describe a link. T he Tooltip plug-in is inspired by jQuery.tipsy written by Jason Frame. The Tooltip plug-in makes a number of improvements, such as not relying on images, but instead using CSS for animation and storing title information with the data property.

Bootstrap Tips Tool (Tooltip) plug-in If you want to refer to the plug-in's functionality separately, you need to refer to the tooltip .js. Or, as mentioned in the Bootstrap plug-in overview chapter, you can refer to bootstrap.js or the compressed version of Bootstrap.min .js.

Usage

The Tooltip plug-in generates content and tags on demand, and by default places the Tooltip behind their trigger elements. There are two ways you can add a tooltip:

  • Via the data property: To add a tooltip, simply add a data-toggle to an anchor label. T he title of the anchor is the text of the tooltip. By default, the plug-in sets the tooltip at the top.

    <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
  • With JavaScript: The JavaScript Trigger Prompt Tool (tooltip):

    $('#identifier').tooltip(options)
Bootstrap Tips Tool (Tooltip) plug-in Unlike the drop-down menus and other plug-ins discussed earlier, the Tooltip plug-in is not a pure CSS plug-in. T o use the plug-in, you must activate it with jquery (read javascript). Use the following script to enable all the prompt tools (tooltip) on the page:
$(function () { $("[data-toggle='tooltip']").tooltip(); });

Instance

The following example demonstrates the use of tooltip plug-ins through the data property.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 提示工具(Tooltip)插件</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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="左侧的 Tooltip">
   左侧的 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="右侧的 Tooltip">
   右侧的 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="左侧的 Tooltip">
   左侧的 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="右侧的 Tooltip">
   右侧的 Tooltip</button><script>
   $(function ({ $("[data-toggle='tooltip']").tooltip(); });</script></body></html>

The result is as follows:

Bootstrap Tips Tool (Tooltip) plug-in

Options

Some options are added through the Bootstrap Data API or called through JavaScript. The following table lists these options:

选项名称 类型/默认值 Data 属性名称 描述
animation boolean
默认值:true
data-animation 提示工具使用 CSS 渐变滤镜效果。
html boolean
默认值:false
data-html 向提示工具插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
placement string|function
默认值:top
data-placement 规定如何定位提示工具(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整提示工具。例如,如果 placement 是 "auto left",提示工具将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selector string
默认值:false
data-selector 如果提供了一个选择器,提示工具对象将被委派到指定的目标。
title string | function
默认值:''
data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
trigger string
默认值:'hover focus'
data-trigger 定义如何触发提示工具: click| hover | focus | manual 。您可以传递多个触发器,每个触发器之间用空格分隔。
content string | function
默认值:''
data-content 如果未指定 data-content 属性,则使用默认的 content 值。
delay number | object
默认值:0
data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay:{ show: 500, hide: 100 }
container string | false
默认值:false
data-container 向指定元素追加提示工具。
实例: container: 'body'

Method

Here are some useful ways to do this in the Tooltip plug-in:

方法 描述 实例
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')

Instance

The following example demonstrates the use of the Tooltip plug-in approach.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 提示工具(Tooltip)插件方法</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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>

The result is as follows:

Bootstrap Tips Tool (Tooltip) plug-in

Event

The following table lists the events to use in the Tooltip plug-in. These events can be used as hooks in functions.

事件 描述 实例
show.bs.tooltip 当调用 show 实例方法时立即触发该事件。
$('#myTooltip').on('show.bs.tooltip', function () {
  // 执行一些动作...})
shown.bs.tooltip 当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
$('#myTooltip').on('shown.bs.tooltip', function () {
  // 执行一些动作...})
hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。
$('#myTooltip').on('hide.bs.tooltip', function () {
  // 执行一些动作...})
hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // 执行一些动作...})

Instance

The following example demonstrates the use of tooltip plug-in events.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 提示工具(Tooltip)插件事件</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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>

The result is as follows:

Bootstrap Tips Tool (Tooltip) plug-in