Very Cool and Lightweight Tooltips

How to do it with just three lines of CSS!

These are great for showing enlarged images of content inside of a marquee or scroller.

You have seen all kinds of javascript tooltips and neat effects, but why slow your page down with JavaScript where simple CSS will do? Best of all, CSS tooltips are easier for search engines to parse, which can bring you higher pagerank and more visitors.

By now you are familiar with the omnipresent, standard (boring) tooltip. You can spice that up a bit with just CSS and a CSS tooltip.

Hold your mouse over this text to see a standard tooltip.

How to do it:      ?  Just two steps!
  1. Copy and paste the CSS into your CSS file
  2. Copy and paste the HTML into your page.

Three little lines of CSS (You can do it in your CSS file, or in a Style tag in the head of your document.
CSS: /*---------- Easy tooltip -----------*/
a.ez:hover {
   background:#ffffff; text-decoration:none;}
   /*BG color is a must for IE6*/

a.ez span {
   display:none; padding:2px 3px; margin-left:8px; width:280px; text-align:left; z-index:1000;}

a.ez:hover span{
   display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

Then to call up this tooltip, just a bit of HTML where you want the tooltip to appear:
HTML:<a href="#" class="ez">Hold your mouse over this text to see a simple CSS tooltip<span class="ez"><BR /><B><center><font color="#000066" size="+3" face="comic sans ms, Geneva, Arial, Helvetica, sans-serif">CSS Tooltip</font></B></center><BR />As you can see, this tooltip is much cooler than the original. You can put in HTML including images and even animations.<BR /><center><img src="images/frog.gif" /></center> </span></a>

So as you can see, the CSS tooltip is much more flexible. There are other tooltips, mostly relying upon some Javascript which can give some very need fade in/out effects and they will not have some of the layer and cross-browser issues that CSS tooltips can have. You can see some different examples of Javascript tooltips on these pages:

These are very good for putting over top of your scrolling images to show a larger version on mouseover, much like they did on the parody page "Vegetarians Are Evil.com" - they have a tee shirt scroller in the right column towards the bottom of the homepage, and on mouse over, a tooltip shows an enlarged version of the tee shirt design.

#1 GoDaddy.com - Home of the $1.99 domain name

Image Scroller Marquee



HTML scroller with pause and background color change on mouseover. Uses no javascript.

>>>Get this script


JavaScript Scroller

>>>Get this script