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]
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.
100,000+ Designs, Documents Templates in PDF, Word, Excel, PSD, Google Docs, PowerPoint, InDesign, Apple Pages, Google Sheets, Publisher, Apple Numbers, Illustrator, Keynote. - START DOWNLOADING
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:
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.
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.
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 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.