Custom Accessible Tooltip with Html5 and CSS

Category: CSS & CSS3 , tooltip | July 21, 2015
Author: harrygfox
Views Total: 3,152
Official Page: Go to website
Last Update: July 21, 2015
License: MIT


Custom Accessible Tooltip with Html5 and CSS


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" 
       data-tip="This is tooltip A">
       adipiscing elit

That’s it.

You Might Be Interested In:

Leave a Reply