CSS Tooltip

If you need a really simple and basic cross-browser tooltip on your website, this pure CSS tooltip is the one for you. It is light-weight, cross browser compatible, and easy to use.

Demo

Choose a skin and hover the Tooltip links below.

Skin 1Skin 2

Tooltip CSS Tooltip callout Most Light-weight Tooltip
This is the easy-to-use Tooltip driven purely by CSS. CSS only Tooltip
Pure CSS popup tooltips with clean semantic XHTML.

Note: The following source codes will also be updated when the skin option is changed.

CSS

CSS3 extras

The later part of the CSS is CSS3 extras. CSS3 extras such as border-radius or box-shadow properties will give what used to be a generic-looking "boxy" popups a more sophisticated visual appearance. Those CSS3 extras are supported by all major browsers except IE 8 and below.

HTML markup

<a href="#" class="tooltip"> Tooltip <img class="callout" src="src/callout.gif" /> Most Light-weight Tooltip This is the easy-to-use Tooltip driven purely by CSS. </a> <a href="#" class="tooltip"> <img src="../img/demo/css-tooltip-image.gif" /> <img class="callout" src="src/callout.gif" /> CSS only Tooltip <img src="../img/demo/css-tooltip-image.gif" style="float:right;" /> Pure CSS popup tooltips with clean semantic XHTML. </a>

Images

The images used by the tooltip box:

Callout icon: Background image: none

CSS Tooltip vs Javascript Tooltip

This table compares CSS Tooltip to Menucool Javascript Tooltip that will help you to find which one is more fit for you.

Features	CSS Tooltip	Javascript Tooltip
Cross-Browser	Yes. Supported by all major browsers including IE 7.	Yes Supported by all major browsers including IE 6.
Rich HTML	Yes	Yes
Animation	No	Yes
SEO friendly	Yes	Yes (When using the tooltip.pop(this, "#contentElementId") approach, or by adding a real link for the tooltip.ajax().)
Links in the tooltip	Not accessible / clickable Because when the mouse leaves the targetTarget is the element that triggers the tooltip box., the tooltip box disappears immediately.	Yes There is a delay before the tooltip disappears, and the tooltip stays when the tooltip box is being hovered.
Ajax support	No	Yes That means tooltip content can be retrieved dynamically from another document.
Flexible tags	No Only accept anchor targetTarget is the element that triggers the tooltip box..	Yes Any tags such as div, div, a, img, ect.
Flexible events	No Only responde to anchor's hovering event (a:hover)	Yes Any client event such as onclick, onmouseover, onfocus, ect.
Callout image	Required.	Not required. The callout is generated automatically based on the CSS setting.
Light Weight	Yes CSS: 1KB.	Yes CSS: 1KB. Javascript: 14KB.
Cost	Free	$20.00