Bootstrap tooltip plug-in that you must learn every day_javascript skills

Tooltips are very useful when you want to describe a link. The Tooltip plugin was inspired by jQuery.tipsy written by Jason Frame. The Tooltip plug-in has made many improvements. For example, it does not need to rely on images, but instead uses CSS to achieve animation effects and uses the data attribute to store title information.

If you want to reference the functionality of this plugin separately, then you need to reference tooltip.js. Alternatively, as mentioned in the chapter Bootstrap Plugin Overview, you can reference bootstrap.js or a minified version of bootstrap.min.js.
1. Usage
Tooltip plug-ins generate content and markup on demand. By default, tooltips are placed after their triggering elements. You can add tooltips in the following two ways:

1. Through the data attribute: If you need to add a tooltip, just add data-toggle="tooltip" to an anchor tag. The title of the anchor is the text of the tooltip. By default, the plugin sets the tooltip at the top.

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

2. Via JavaScript: Trigger tooltip via JavaScript:

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

The Tooltip plugin is not a pure CSS plugin like the drop-down menus and other plugins discussed before. To use the plugin, you must activate it using jquery (read javascript). Use the following script to enable all tooltips on the page:

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

2. Options
Some options are added via the Bootstrap Data API or called via JavaScript. The options are listed in the table below:

3. Tooltip

//基本实例

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明

$('#section').tooltip();

Tooltips have many properties to configure the display of tips, as follows:

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
 data-animation="false"
 data-html="true"
 data-placement="auto"
 data-selector="a[rel=tooltip]"
 data-trigger="click"
 data-delay="500"
 data-template="<b>123</b>"
>HTML5</a>

JavaScript method can directly remove the previous data. Including: animation, html, placement, selector, original-title, title, trigger, delay, container and template attributes.

//JavaScript 方式

$('#section a').tooltip({
 delay : {
  show : 500,
  hide : 100,
 },
 container : 'body'
}); 

JavaScript has four methods: show, hide, toggle and destroy.

//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

There are four types of events in Tooltip.

//Event, other similar

$('#select a').on('show.bs.tooltip', function() {
 alert('调用 show 时触发！');
}); 

The above is the entire content of this article, I hope it will be helpful to everyone’s study.