📌  相关文章
📜  Bootstrap-工具提示插件

📅  最后修改于: 2020-10-27 06:22:44             🧑  作者: Mango

 

当您需要描述链接时，工具提示会很有用。该插件的灵感来自Jason Frame编写的jQuery.tipsy插件。此后，工具提示已更新为可以在没有图像的情况下工作，并带有CSS动画和用于本地标题存储的数据属性。

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

用法

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

  • 通过数据属性-要添加工具提示，请将data-toggle =“ tooltip”添加到锚标记。锚点的标题将是工具提示的文本。默认情况下，插件将工具提示设置为顶部。
Hover over me
  • 通过JavaScript-通过JavaScript触发工具提示-
$('#identifier').tooltip(options)

Tooltip插件不仅是下拉菜单之类的CSS插件，也不是前面章节中讨论的其他插件。要使用此插件，您必须使用jquery激活它(阅读javascript)。要启用页面上的所有工具提示，只需使用此脚本-

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

例

以下示例通过数据属性演示了工具提示插件的用法。

现场演示
Tooltip examples for anchors


This is a  Default Tooltip.

This is a Tooltip on Left.

This is a Tooltip on Top.

This is a Tooltip on Bottom.

This is a Tooltip on Right
    




Tooltip examples for buttons

选件

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

Option Name Type/Default Value Data attribute name Description
animation boolean Default: true data-animation Applies a CSS fade transition to the tooltip.
html boolean Default: false data-html Inserts HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement string|function Default: top data-placement Specifies how to position the tooltip (i.e., top|bottom|left|right|auto).

When auto is specified, it will dynamically reorient the tooltip. For example, if placement is “auto left”, the tooltip will display to the left when possible, otherwise it will display right.
selector string Default: false data-selector If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function Default: “ data-title The title option is the default title value if the title attribute isn’t present.
trigger string Default: ‘hover focus’ data-trigger Defines how the tooltip is triggered: click| hover | focus | manual. You may pass multiple triggers; separate them with a space.
content string | function Default: ” data-content Default content value if data-content attribute isn’t present
delay number | object Default: 0 data-delay Delays showing and hiding the tooltip in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is − 
delay: { show: 500, hide: 100 }
container string | false Default: false data-container Appends the tooltip to a specific element. Example: container: ‘body’

方法

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

Method Description Example
Options − .tooltip(options) Attaches a tooltip handler to an element collection. 
$().tooltip(options)
Toggle − .tooltip(‘toggle’) Toggles an element’s tooltip. 
$('#element').tooltip('toggle')
Show − .tooltip(‘show’) Reveals an element’s tooltip. 
$('#element').tooltip('show')
Hide − .tooltip(‘hide’) Hides an element’s tooltip. 
$('#element').tooltip('hide')
Destroy − .tooltip(‘destroy’) Hides and destroys an element’s tooltip. 
$('#element').tooltip('destroy')

例

以下示例通过数据属性演示了工具提示插件的用法。

现场演示

   This is a Tooltip on method show.

   This is a Tooltip on method hide.

   This is a Tooltip on method destroy.

   This is a Tooltip on method toggle.
   
   






   
   

      This is a Tooltip on method options.

大事记

下表列出了可与工具提示插件一起使用的事件。此事件可用于挂接到函数。

Event Description Example
show.bs.tooltip This event fires immediately when the show instance method is called. 
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). 
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip This event is fired immediately when the hide instance method has been called. 
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). 
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

例

以下示例通过数据属性演示了工具提示插件的用法。

现场演示
Tooltip examples for anchors


This is a Default Tooltip.