Tooltips are very useful when you want to describe a link. Tooltip plugin is inspired by jQuery.tipsy written by Jason Frame. The Tooltip plug-in has made many improvements, such as not relying on images, but instead using CSS to achieve animation effects and using data attributes to store title information.
If you want to reference the functionality of the plugin separately, then you need to reference tooltip.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Usage
Tooltip plug-ins generate content and tags based on requirements. By default, tooltips are placed behind their trigger elements. There are two ways you can add tooltips:
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">Please hover over me</a>
2. Through JavaScript: Trigger tooltip (tooltip) through JavaScript:
$('#identifier').tooltip(options)The Tooltip plugin is not like the drop-down menus and other plug-ins discussed earlier, it is not a pure CSS plug-in. To use the plugin, you must activate it using jquery (read javascript). Use the following script to enable all tooltips in the page:
$(function () { $("[data-toggle='tooltip']").tooltip(); });2. Options
There are some options that are added through the Bootstrap Data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:
three. Tooltips
//Basic example <a href="#" data-toggle="tooltip">HTML5</a>//The JS part needs to declare $('#section').tooltip();Tooltips have many properties to configure the display of prompts, as follows:
<a href="#" rel="tooltip" data-toggle="tooltip" 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>
Just remove the previous data in JavaScript. Including: animation, html, placement, selector, original-title, title, trigger, delay, container and template and other properties.
//JavaScript method $('#section a').tooltip({ delay : { show : 500, hide : 100, }, container : 'body'});There are four methods for JavaScript: show, hide, toggle and destroy.
//Show $('#section a').tooltip('show');//Hide $('#section a').tooltip('hide');//Invert Show and hide $('#section a').tooltip('toggle');//Hide and destroy $('#section a').tooltip('destroy');There are four types of events in Tooltip.
//Events, other similarities
$('#select a').on('show.bs.tooltip', function() { alert('Free when the show is called!');});This series of tutorials has been compiled into: Bootstrap Basic Tutorials Special Topics, welcome to click to learn.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.