Slick HTML5 / CSS3 Tooltip Library – tooltips.css

tooltips.css is a pure CSS library that appends a custom, clean looking tooltip to any element using HTML5 data attributes.

How to use it:

Just include the minified version of tooltips.css in the head section of the webpage and done.

<link rel="stylesheet" href="tooltips.min.css">

The library works with any elements with the CSS class of ‘data-tooltip’.

<div class="btn" data-tooltip>Hover Me</div>

Add your custom content into the tooltip using data-tooltip-content attribute.

<div class="btn"
     data-tooltip
     data-tooltip-content="This is a tooltip"
     >Hover me</div>

Customize the position in which the tooltip should appear. Accept values: ‘top’, ‘right’, ‘bottom’ and ‘left’.

<div class="btn"
     data-tooltip
     data-tooltip-content="This is a tooltip"
     data-tooltip-direction="right"
     >Hover me</div>