Search code examples
htmlcsstooltipfont-awesome

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>

style:

i.fa {
    display: inline-block;
}
Solution

  • 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>