Tooltips

Tooltips are the perfect way to display content when hovering over something. You can apply tooltips to any element as long as you are using one of the .tooltip-* classes coupled with the data-hint data attribute. Here I am using a simplified version of the Hint.css library.

Tooltips take advantage of the HTML5 data attributes, so support is limited in older versions of Internet Explorer, Google Chrome, Firefox, Safari and Opera.

This add-on requires the font-size() and vendor() mixins in order for the SASS or LESS files to compile without modification.

<a href="#" class="tooltip-top" data-hint="Left tooltip">Top tooltip</a>

<a href="#" class="tooltip-right" data-hint="Right tooltip">Right tooltip</a>

<a href="#" class="tooltip-bottom" data-hint="Bottom tooltip">Bottom tooltip</a>

<a href="#" class="tooltip-left" data-hint="Left tooltip">Left tooltip</a>

Download