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 1       skin 2

 

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

Notice that 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. In the old IEs the tooltip will just degrade gracefully to a square box without rounded corners and shadow.

HTML markup

<!--First tooltip--> <a href="#" class="tooltip"> Tooltip <span> <img class="callout" src="cssttp/callout.gif" /> <strong>Most Light-weight Tooltip</strong><br /> This is the easy-to-use Tooltip driven purely by CSS. </span> </a> <!--Second tooltip--> <a href="#" class="tooltip"> <img src="/tooltip/css-tooltip-image.gif" /> <span> <img class="callout" src="cssttp/callout.gif" /> <img src="/tooltip/src/tooltips-cd2.jpg" style="float:right;" /> <strong>CSS only Tooltip</strong><br /> 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 or JavaScript Tooltip

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

Features CSS Tooltip Javascript Tooltip
Cross-Browser Compatibility

Yes (including IE 7)

Yes (including IE 6)

Rich HTML Yes

Exception: links(<a> tags) are not accessible / clickable as the tooltip box will go away when the mouse leaves the targetCSS Tooltip calloutTarget is the element that triggers the tooltip box..

Yes

Any HTML content is allowed and accessible as there is a delay before the tooltip disappears, and the tooltip stays when the tooltip box is being hovered.

SEO friendly Yes Yes
(When taking the tooltip.pop(this, "#contentElementId") approach, or by adding a real link for the tooltip.ajax().)
Flexible width No Yes
Ajax support No Yes
Tooltip content can be retrieved from another document.
Flexible tags No Yes
Any tags such as div, div, a, img, ect.
Events Only responde to anchor's hovering event (a:hover) Can responde to any client event such as onclick, onmouseover, onfocus, ect.
Callout image Required. Not required.
The callout is generated automatically based on the CSS setting.
Cost Free $20.00

Visit Menucool Javascript Tooltip


QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.