目录

Bootstrap - 工具提示插件( Tooltip Plugin)

当您需要描述链接时,工具提示很有用。 该插件的灵感来自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>
新页面打开
↑回到顶部↑
WIKI教程 @2018