Tooltips with Pure CSS

Hover over / Tab to the spans to see the tooltips.

No stylesheet languages were used in this project.

Just plain old HTML and CSS. This code is open source - so feel free to rip it off to your heart's content.

View Code on GitHub

Each span has a custom data attribute. Here it is data-tip. The value of this data attribute is the message of the tooltip using the CSS function attr().

Each span also has an attribute of tabindex with values incrementing from 1. This allows users without a mouse to view the messages behind the tooltips.

See tooltip.css for a more detailed breakdown.