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.



TooltipCSS Tooltip calloutMost Light-weight Tooltip
This is the easy-to-use Tooltip driven purely by CSS.
            CSS3 Tooltip CSS Tooltip triggered by imageCSS only Tooltip
CSS tooltip image 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 <span> <img class="callout" src="src/callout.gif" /> <strong>Most Light-weight Tooltip</strong><br /> This is the easy-to-use Tooltip driven purely by CSS. </span> </a> <a href="#" class="tooltip"> <img src="../img/demo/css-tooltip-image.gif" /> <span> <img class="callout" src="src/callout.gif" /> <strong>CSS only Tooltip</strong><br /> <img src="../img/demo/css-tooltip-image.gif" style="float:right;" /> Pure CSS popup tooltips with clean semantic XHTML. </span> </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

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 targetCSS Tooltip calloutTarget 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 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

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...