Fontawesome - Tooltip

How to add tooltip to fontawesome icon in html/bootstrap..

It is very easy to add tooltip fontawesome icon, tooltips are description of text displayed while mouse hover on an icon.

use i or span used to add an icon in html.

Adding delete icon in a page is simple as seen below

<i class="fas fa-trash-alt"></i>

To add tooltip to this icon, we can use title attribute.

<i class="fas fa-trash-alt" title="Delete record"></i>

Sometimes if you are using some plugins or code that uses ‘::before’ in existing page, Tooltip might not work. The reason is font awesome has ::before pseudo code that overrides the existing code.

In that case, Solution is to wrap icon code inside span, and add title

<span  title="Delete an item"><i class="fas fa-trash-alt"></i></span>

How to add bootstrap tooltip to fontawesome icon?

Bootstrap has inbuilt nice tooltip, It is very easy to integrate tooltip to it. Adding data-toggle attributes to i tag, title tag is not required.

<i class="fas fa-edit" data-toggle="edit an item" title="Edit an item"></i>\

In javascript/jquery code