CSS Tooltips (no javascript or jQuery)

It was requested of me at work to figure out a way to make hover tooltips that look nice and are do-able. The content management system my company paid for (that I have to work with every day) is powerful, but it is not always easy to do things or extend it with plugins. Incorporating jQuery plugins can be difficult (I tried 3 different lightbox renditions before I was successful). I wanted something that was easy to add to this CMS and looked decent. I figured it could be done in only CSS, especially with the power of CSS3, so I googled it. I came across Six Revisions “Sexy Tooltips with Just CSS“. I was very pleasantly surprised and immediately worked out the code for myself adjusted it and used for my company’s website.

I liked it so much, in fact, that I replaced the jQuery plugin vTip (the website for this doesn’t exist anymore) with the “Sexy CSS” method. Check it out in practice on my portfolio page.

Here is an example of the HTML:

Notice it does require the use of a <span> inside of the <a> element. It is an extra step and if for whatever reason the CSS doesn’t display properly, it won’t look very good for you. This is the only downside of the CSS only method. Here is the CSS:

It is pretty straight forward and completely style-able which is really nice. Six Revisions had different images displayed on different version (info, warning, etc.) but I just stuck to the classic. The use of CSS transitions on these tooltips is also available for those browsers that handle them, if you want to add it yourself. This CSS works in all browsers, even back to IE6. Yes, I said IE6. Obviously the drop shadow and rounded corners go away in older browsers, but the tooltip itself still works great.

UPDATE: If you are using numerous tooltips, there are some layering issues in IE8 and older versions of IE. There is a fix for the code, that will not affect how other browsers work with it. Just remove the position: relative; from .tooltips and add