Tooltip

<br><br><br><br>

<p>Standard tooltip using data attributes - <span class="hgm-tooltip" data-tooltip-text="I'm the tooltip text">Tooltip (hover over me)</span></p>


<br><br>

<p><span class="hgm-tooltip" data-tooltip-text="I'm the tooltip text (left)" data-tooltip-direction="left">Tooltip (hover over me)</span> - Tooltip that appears to the left</p>

<br><br>

<p>Tooltip that appears to the right - <span class="hgm-tooltip" data-tooltip-text="I'm the tooltip text (right)" data-tooltip-direction="right">Tooltip (hover over me)</span></p>

<br><br>

<p>Tooltip that appears on the bottom - <span class="hgm-tooltip" data-tooltip-text="I'm the tooltip text (bottom); This is a longer sentence!!" data-tooltip-direction="bottom">Tooltip (hover over me)</span></p>