examples show me how it looks
Picture by Tiltti (http://www.flickr.com/photos/tiltti/)
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 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.
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
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 :-)