How to add Bootstrap tooltips on glyphicons and font-awesome icons

Adding tooltips in icons

In the Bootstrap tooltip tutorial, I have shown you creating tooltips over buttons, links, input fields etc. I have also shown how to create tooltips with HTML content inside it.

In this article, I will show how to add tooltips to Bootstrap glyph icons and font-awesome icons.

A demo of adding tooltips to font-awesome icons

For this demo of showing the tooltips as the mouse hovers over the icons, the Bootstrap CSS, jQuery, and bootstrap JS files are included in the head section. Besides, as it uses the font-awesome icons, so a reference to its CSS file is also included in the head section.

A few icons are used from the library. The tooltips text is specified in the data-original-title attribute of the span tag that contains icon classes. This text will appear as you bring the mouse over an icon.

For this demo, the tooltips will appear at the bottom of  icons.

bootstrap tooltip icon

See online demo and code

The script:

 

The markup:

 

A demo with top placement in font awesome icons

Using the same markup as in above example, only the placement value is changed to the top position. Have a look:

bootstrap tooltip icon

See online demo and code

Only the script part is changed in this demo as below:

 

That is, the placement option is assigned the top value. Similarly, you may use the left and right values for the tooltip to appear left and right, respectively.

A demo of tooltip in Bootstrap with Glyphicons

In this example, the glyph icons are used rather font-awesome icons. The same script is used for creating the tooltips as in above examples. The direction of displaying the tooltip is top:

bootstrap tooltip glyph icons

See online demo and code

The jQuery script:

 

The markup used for glyph icons tooltips:

 

The small CSS:

 

That’s it!