Skip Site Navigation «

CSS Tooltips


This is a simple demonstration of using custom CSS tooltips as a drop-in replacement for the browser-based title attribute. No time like the present—

Everyone should visit Wikipedia!Wikipedia! on Wiki

/* css/tooltip.css -- fancy tooltips */ span.tool { position: relative; /* this is key */ cursor: help; } span.tool span.tip { display: none; /* so is this */ } /* tooltip will display on :hover event */ span.tool:hover span.tip { display: block; z-index: 100; position: absolute; top: 1.6em; left: 0; width: auto; padding: 3px 7px 4px 6px; border: 1px solid #336; background-color: #f7f7ee; font: normal 0.9em/1.2em arial, helvetica, sans-serif; text-align: left; color: #000; } #content span.tool::after { padding-left: 2px; /* eye candy */ content: url(/img/bubble.gif); } /* css/tooltip.css */

Didn’t find what you were looking for? Try searching drx for many other helpful CSS resources.

Last updated: Monday, October 20th, 2008 @ 4:36 PM EDT [2008-10-20T20:36:21Z]   home

(c) 2008-2010, Douglas W. Clifton,, all rights reserved.