Custom Accessible Tooltip with Html5 and CSS

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

Preview:

Custom Accessible Tooltip with Html5 and CSS

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.

You Might Be Interested In:


Leave a Reply