MaciekBaron / extremely-simple-css3-tooltip

An extremely simple CSS3 tooltip solution

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

extremely-simple-css3-tooltip

An extremely simple CSS3 tooltip solution which is supported by browsers that understand attr(). No Javascript is being used. Written in little over 20 lines of CSS (can be even shorter depending on style).

You simply wrap your word or phrase using a <span> tag and set the data-tooltip attribute, like so:

This is a paragraph that contains <span data-tooltip="Text is usually a collection of words">text</span> 
and other bits and bobs. There's nothing out of the ordinary here.

CSS takes care of the rest.

View an extremely simple demo.

About

An extremely simple CSS3 tooltip solution

License:MIT License


Languages

Language:CSS 100.0%