arthur arthur - 1 year ago 119
CSS Question

Tooltip not displaying on fontawesome icon button

I have a fontawesome icon nested inside a but the tooltip is not popping up.

<i class="fa fa-random" title="some tooltip"></i>


i.fa {
display: inline-block;

Answer Source

If you are using a tooltip plugin that uses the ::before pseudo element then it conflicts with fontawesome because it also uses the pesudo element to display the icon.

It is best to wrap your icon inside another tag that gets the tooltip class:

<span class="tooltip" title="hello world"><i class="fa fa-random"></i></span>