Bootstrap Tooltips

In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positioning. 👁 Tether library
Hence, we need to include tether.min.js before bootstrap.js Now let's see an example of a tooltip. 👁 Example of a tooltip
 

Now we will examine the code which generates the above tooltip 

In order to introduce tooltip, we add the data-toggle attribute to an element and we need to initialize the tooltip with jQuery. jQuery code for initializing a tooltip: 

We can even customize this tool-tip according to our requirement, let's explore different ways in which we can customize the tool-tip.

• Placement of a tool tip : We can place a tool tip at top, bottom, left and right of an element. 

Example:

 👁 Tooltip placements
 

Code for the above example: 

• In the above code we have used the data-placement attribute in order to set the placement of tool tip, we have also used row and col classes provided by bootstrap grid system
• Html within a tooltip: We can add html as a content of a tooltip. 

Example:

 👁 Html as a content of tooltip
 

Code for the above example: 

• In the above code we have used the data-html attribute in order to add an html within a tool tip.
• Offset for a Tooltip: We can set the offset of the tool-tip relative to the target. 

Example:

 👁 Offset for tooltips

 Code for the above example: 

• In the above code, we have used data-offset attribute to set the attribute

Note: The output of all the code below is non-static hence, the output is not shown here.

• Animation on a tooltip: By default, the animation is added to the tooltip, i.e it fades in and fades out we can remove this animation. 

• In the above code we have used the data-animation attribute and it is set to false in order to remove animation from the tooltip
• Delay in appearance and disappearance: We could set a time interval for appearance and disappearance of a tooltip. We can set a delay in two ways:
  1. We set same delay time for showing and hiding 

1. In the above code we have used the data-delay attribute to delay the tool-tip number assigned to this attribute is in ms i.e tool tip will be delayed for 1000 ms.
2. We can add different delay time intervals for showing and hiding tool-tip. 

HTML code: 

1. There is no changes in the html code. 

jQuery code: 

• Triggering of the tool-tip: We can add an event which will trigger a tooltip, by default a tooltip is triggered on "hover and focus", various events that is allowed are,- click, hover, focus and manual. 

• In the above code we have used the data-trigger attribute and value is set to be click, which means when user clicks on the element the tool-tip will appear