Mouse over any link to see a custom tooltip

Standard tooltip

Statusbar style tooltip

Code Snippet

*[tooltip]:hover:after {
    content: attr(tooltip);
    /* style your tooltip */
}

CSS Property

  • {content: attr(attrName);}

Notes

  • CSS Only
  • Lightweight
  • Accessible
  • Supported Browsers: IE8, Firefox, Safari, Opera
  • Use of custom attribute
  • Use title attribute and changed it to custom attribute using javascript for browsers that supports it
  • Position of the tooltip depends on the browser (Mouse over code snippet in FF and chrome)