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      skin 1   skin 2
  2. Customize and Apply

    Text Color:
    Background Color (Start):
    Background Color (End):
    Border Color:
    Border Width:
    1px   2px
  3. Try it Out     Tooltip Pure CSS driven
    You will see the animated sliding of the tooltip using some cool CSS3 properties.
    Cross Browser Compatibility
    It will still work in non-CSS3 compatible browsers such as IE8 and below. But in those older browsers the tooltip will not have transitional effect, and it will not show the callout angle.

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

Need more advanced one?

For better cross-browser support and extra sophisticated features, look at Menucool Javascript Tooltip.



Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.