码农教程 - 一技在手,衣食无忧! tools

Bootstrap JS 工具提示

❮ 上一节 下一节 ❯

JS 工具提示 (tooltip.js)

工具提示插件是一个小的弹出框，当用户将鼠标指针移动到元素上时会出现。

有关工具提示的教程，请阅读我们的Bootstrap 工具提示教程。

通过 data-* 属性

这个data-toggle="tooltip"激活工具提示。

这个title属性指定应显示在工具提示内的文本。

示例

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
亲自试一试 »

通过JavaScript

工具提示不是纯 CSS 插件，因此必须使用 jQuery 初始化：选择指定的元素并调用tooltip()方法。

示例

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
亲自试一试 »

工具提示选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，请将选项名称附加到 data-，如 data-placement=""。

Name Type Default Description 尝试一下
animation boolean true

Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip

  • true - Add a fading effect
  • false - Do not add a fading effect
 尝试一下
container string, or the boolean false false Appends the tooltip to a specific element.
Example: container: 'body'		 尝试一下
delay number, or object 0 Specifies the number of milliseconds it will take to show and hide the tooltip.

To specify a delay for showing and another one for hiding, use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it		 尝试一下
html boolean  false Specifies whether to accept HTML tags in the tooltip:
 
  • true - Accept HTML tags
  • false - Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or using the title option).

When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks		 尝试一下
placement string "top" Specifies the tooltip position. Possible values:

  • "top" - Tooltip on top
  • "bottom" - Tooltip on bottom
  • "left" - Tooltip on left
  • "right" - Tooltip on right
  • "auto" - Lets the browser decide the position of the tooltip. For example, if the value is "auto left", the tooltip will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the tooltip will display at the bottom when possible, otherwise on the top
 尝试一下
selector string, or the boolean false false Adds the tooltip to a specified selector 尝试一下
template string   Base HTML to use when creating the tooltip.

The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip class.
title string "" Specifies the text that should be displayed inside the tooltip 尝试一下
trigger string "hover focus" Specifies how the tooltip is triggered. Possible values:

  • "click" - Trigger the tooltip with a click
  • "hover" - Trigger the tooltip on hover
  • "focus" - Trigger the tooltip when it gets focus (by tabbing or clicking .e.g)
  • "manual" - Trigger the tooltip manually
Tip: To pass multiple values, separate them with a space		 尝试一下
viewport string, or object {selector: "body", padding: 0} Keeps the tooltip within the bounds of this element.

Example: viewport: '#viewport' or {selector: '#viewport', padding: 0}

工具提示方法

下表列出了所有可用的工具提示方法。

Method Description 尝试一下
.tooltip(options) Activates the tooltip with an option. See options above for valid values 尝试一下
.tooltip("show") Shows the tooltip 尝试一下
.tooltip("hide") Hides the tooltip 尝试一下
.tooltip("toggle") Toggles the tooltip 尝试一下
.tooltip("destroy") Hides and destroys the tooltip 尝试一下

工具提示事件

下表列出了所有可用的工具提示事件。

Event Description 尝试一下
show.bs.tooltip Occurs when the tooltip is about to be shown 尝试一下
shown.bs.tooltip Occurs when the tooltip is fully shown (after CSS transitions have completed) 尝试一下
hide.bs.tooltip Occurs when the tooltip is about to be hidden 尝试一下
hidden.bs.tooltip Occurs when the tooltip is fully hidden (after CSS transitions have completed) 尝试一下

更多示例

自定义工具提示设计

使用 CSS 自定义工具提示的外观：

示例

/* Tooltip */
.test + .tooltip > .tooltip-inner {
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 15px;
  font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
  border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
  border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
  border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
  border-right: 5px solid black;
}
亲自试一试 »

❮ 上一节 下一节 ❯