How to Use Bootstrap Tooltip

ToolTip is a great way to point some hint or information to the user. Rather than showing all the information on the web page all the time, it would be really great to show information only when needed and a tooltip is the best option in such case. It will help us to improve user experience on the web page. [Bootstrap Grid – Column Wrapping]

Bootstrap ships with a number of JavaScript tools, the tooltip is one of the tools from that group. Bootstrap tooltip is inspired from jQuery.tipsy plugin was written by Jason Frame. We can say that bootstrap tooltip is the upgraded version of that. Things which are news to Bootstrap tooltip is a removal of images, use of CSS3 animations and usage of the data attribute. [Bootstrap Alternative CSS Frameworks]

In this article, we will be checking on how to use Bootstrap Tooltip. But before that we will be looking into few things about tooltip first.

Tooltip Direction

We can get a tooltip for all four directions which are top, right, bottom, and left aligned. We can get this tooltip for each direction by using proper markup as below:

Initialize Tooptip

For the performance point of view, we need to initialize tooltip before it can be used. We can initialize tooltip using a code, but we need to make sure that we are using `toggle` data attribute of an elements.

Once tooltip is initialized, it will generate markup to show a tooltip. We will see what kind of markup it will generate based on data attributes we have given.

Options

Tooltip plugin has got a good amount of options, so we can customize that as per need. We can use these options while initializing tooltip object or we can utilize data attribute for each option. We can use option name as a data attribute. e.g. data-animation, data-selector, data-title, etc. All the options for this plugin can be found here.

Just like options we have all possible methods and events assigned to a tooltip, which we will be looking into next section.

Methods

We can use tooltip’s method by using ‘$().tooltip(options)’ code, where options are different methods we can use. Let’s go into each method below:

Events

Events are handlers which we can utilize to perform a custom action on the specific event of Tooltip.

show.bs.tooltip: fires immediately when the show method is called

shown.bs.tooltip: fired when the tooltip has been made visible to the user (Keep note that, this event will wait for CSS transition to complete)

hide.bs.tooltip: fires immediately when the hide method is called

hidden.bs.tooltip: fired when the tooltip has finished being hidden to user (Keep note that, this event will wait for CSS transition to complete)

inserted.bs.tooltip: fired after the show.bs.tooltip event when the template has been generated and added to the DOM

You might have a question on how to use this event, not to worry have a look at below code on how to utilize these events.

Hope you find this tips to use Bootstrap Tool helpful. Share your views in comments below.

by Irshad Shaik

You may also like

Read More Articles about

Tutorials