Custom Accessible Tooltip with Html5 and CSS

Preview:

Description:

A super tiny CSS library used to create accessible, custom and reusable tooltips using CSS attr() function, pseudo selectors and Html5 data-tip attribute.

How to use it:

Load the required tooltip.css in the document’s head section.

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

Add custom tooltip to your text as follow.

<span  class="tooltip" 
       tabindex="1" 
       data-tip="This is tooltip A">
       adipiscing elit
</span>

That’s it.