Small Pure CSS / HTML5 Tooltips

Preview:

Description:

A small CSS library used to append nice tooltips to any DOM elements using Html5 data attributes.

How to use it:

Load the tooltips.css in the head section of the document.

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

Create a tooltip with custom text that appears at the bottom of target element when hovered.

<button data-tip-bm="I am a tooltip">Hover me</button>

Full data attributes to control the position of your tooltips.

• data-tip-tr: top right
• data-tip-tm: top middle
• data-tip-tl: top left
• data-tip-br: bottom right
• data-tip-bm: bottom middle
• data-tip-bl: bottom left