Pure CSS3 Tooltips

examples show me how it looks

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.

usage the css and the html

First add the .css

<link rel="stylesheet" href="tooltips.css" type="text/css" media="screen" />

Use this HTML structure to create tooltips:

<a href="#">
	Lorem ipsum — the content of the link
	<span class="tooltip"> — start of the tooltip
		<span></span> — this is for the triangle, only cosmetic
		Lorem ipsum dolor sit amet — the content of the tooltip
	</span> — end of the tooltip
</a>

Don't use block elements inside the tooltip. To do so, you have to change the span structure for divs.
Don't use span inside the tooltip since it's used for the triangle. To do that, add a class to the span, or use another tag.

browsers and other things

General problems

The tooltip position is relative to the link, not the cursor
Some CSS properties, such as display:none, cause problems with the transition
It's not possible to place the tooltip above the link in a dynamic way

Webkit (Chrome & Safari)

Underline inheritance can't be reset

Firefox

Transitions work since version 4

Opera

No problems

Internet Explorer

Everything works correctly from version 9

credits the author

These tooltips were made by Horacio Bella (horaciobella.com) in the beautiful, creative space provided by Beew (holabeew.com) in Rosario, Argentina. They were released to use for free. You can follow me on Twitter (@horaciobella) or contact me by any other mean listed on my site.

Did you like these tooltips? Please tweet this :-)