Fontawesome - Tooltip

It is very easy to add a tooltip font awesome icon, tooltips are a description of text displayed while the mouse hovers on an icon.

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

Adding a delete icon on a page is simple as seen below

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

To add a tooltip to this icon, we can use the 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 the existing page, Tooltip might not work. The reason is font awesome has ::before pseudo-code that overrides the existing code.

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

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

How to add bootstrap tooltip to fontawesome icon?

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

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

In javascript/jquery code

$(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();
});