Add tooltip to font awesome icon
<p>Has anyone here added tooltips to font-awesome icons?</p>

<p>I have the <a href="https://jsfiddle.net/HarrietFiddles/1btr64kw/1/" rel="noreferrer">following jsfiddle</a>, but cannot seem to find a guide to add tooltips to the icons.</p>

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

  &lt;!-- display welcome text --&gt;
  &lt;div id="welcomeText"&gt;
    &lt;p&gt;Welcome Harriet&lt;/p&gt;
  &lt;/div&gt;

&lt;/header&gt;
</code></pre>