Custom Accessible Tooltip with Html5 and CSS

Author: harrygfox
Views Total: 1,076 views
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.

See also  HTML & CSS Only FAQ Accordion

Leave a Reply

Your email address will not be published. Required fields are marked *