CSS3 Tooltip Maker

This CSS3 Tooltip Maker will generate pure CSS tooltip that is aesthetically enhanced using CSS3. It will still work on browsers that don't support CSS3 ( such as IE ) - it just will not look as pretty and has no animation effect.


  1. Quick Preset    
  2. Customize further and Apply
    Text Color:
    Background Color (Start):
    Background Color (End):
    Border Color:
    Border Width:
    1px         2px
  3. Try     TooltipPure CSS driven
    You will see the animated sliding of the tooltip using some cool CSS3 properties.                 CSS3 Tooltip Cross Browser Compatibility
    CSS3 tooltip image It also works on non-CSS3 compatible browsers such as IE8 and below, degrades to legacy browsers nicely.

HTML of the CSS3 Tooltip

<a href="#" class="tooltip"> Soeslm Ojlsss — the content of the link that will trigger the tooltip box <span> — start of the tooltip box <b></b> — the callout triangle Sojlsfoi soiolislie — the content of the tooltip </span> — end of the tooltip </a>

CSS and CSS3 of the Tooltip

CSS3 Tooltip vs Javascript Tooltip

CSS3 only supports inline contents, while Menucool Javascript Tooltip supports both inline content and content from external files via Ajax.

Ask Questions / Leave a Comment

Question Title:
Your name:
+ =