Bootstrap tool tip (Tooltip) plugin _javascript tips every day

The ToolTip (Tooltip) is useful when you want to describe a link. The tooltip (Tooltip) plugin is inspired by the Jquery.tipsy written by Jason Frame. The tooltip (Tooltip) plugin has made a lot of improvements, such as not needing to rely on images, but using CSS to animate and store header information with the Data property.

If you want to refer to the functionality of the plug-in separately, you need to refer to tooltip.js. Alternatively, as mentioned in the Bootstrap plug-in overview chapter, you can refer to the Bootstrap.js or compressed version of Bootstrap.min.js.
One, usage
the ToolTip (Tooltip) plug-in generates content and markup based on requirements and, by default, puts ToolTips (Tooltip) behind their triggering elements. There are two ways you can add ToolTips (tooltip):

1, through the Data property: If you need to add a ToolTip (tooltip), simply add data-toggle= "tooltip" to an anchor tag. The title of the anchor is the text of the ToolTip (tooltip). By default, the plug-in sets the ToolTip (tooltip) to the top.

<a href= "#" data-toggle= "tooltip" title= "Example tooltip" > Please hover over my top </a>

2, through JavaScript: Trigger ToolTips via JavaScript (tooltip):

$ (' #identifier '). ToolTip (Options)

The tooltip (Tooltip) plugin is not a pure CSS plug-in, unlike the Drop-down menus and other plug-ins discussed earlier. To use this plug-in, you must use jquery to activate it (read JavaScript). Use the following script to enable all ToolTips on the page (tooltip):

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

Second, options
Some options are added via the Bootstrap Data API (BOOTSTRAP) or called through JavaScript. The following table lists the options:

Three Tool Tips

Basic instance

<a href= "#" data-toggle= "tooltip" title= "hypertext identifier" >HTML5</a>
//js part need to declare

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

ToolTips have many properties to configure the display of hints, as follows:

<a href= "#" rel= "tooltip" data-toggle= "tooltip" title= "hypertext identifier"
 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>

The JavaScript method directly removes the preceding data. Includes attributes such as animation, HTML, placement, selector, Original-title, title, trigger, delay, container, and template.

JavaScript mode

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

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

Displays
$ (' #section a '). ToolTip (' Show ');
Hide
$ (' #section a '). ToolTip (' hide ');
Reverse Show and Hide
$ (' #section a '). ToolTip (' toggle ');
Hide and Destroy
$ (' #section a '). ToolTip (' Destroy ');

There are four kinds of events in Tooltip.

Events, other similarities

$ (' #select a '). On (' Show.bs.tooltip ', function () {
 alert (' Trigger when calling Show!). ');
}); 

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.