Add tooltip to font awesome icon

Question

Has anyone here added tooltips to font-awesome icons?

I have the following jsfiddle, but cannot seem to find a guide to add tooltips to the icons.

<header>
  <!-- icons for settings, change pwd and list of active sessions -->
  <div id="menuIcons">
    <i class="fa fa-cog"></i>
    <i class="fa fa-user"></i>
    <i class="fa fa-lock"></i>
  </div>

  <!-- display welcome text -->
  <div id="welcomeText">
    <p>Welcome Harriet</p>
  </div>

</header>

Answer 1

The issue of adding tooltips to any HTML-Output (not only FontAwesome) is an entire book on its own. ;-)

The default way would be to use the title-attribute:

  <div id="welcomeText" title="So nice to see you!">
    <p>Welcome Harriet</p>
  </div>

or

<i class="fa fa-cog" title="Do you like my fa-coq icon?"></i>

But since most people (including me) do not like the standard-tooltips, there are MANY tools out there which will "beautify" them and offer all sort of enhancements. My personal favourites are jBox and qtip2.