How To: Make CSS Tooltips/Picture Rollovers - Overclock.net

stupid · 03-22-07

In the past, I have made tooltips with JavaScript, and that can get lengthy and messy - I prefer to use JavaScript as little as possible. So I recently figured out a new way (probably notall that new, but new to me) to make tooltips and picture enlarging rollovers that is very simple and uses nothing but css and html.

First thing is to add classes either into your <style> section in the <head> of your document, or your seperate style sheet:

Code:

a.tooltip{position:relative; z-index:24;}
a.tooltip:hover{z-index:25;}
a.tooltipspan{display: none; }
a.tooltip:hoverspan{ /*display just on :hover state*/
display:block; text-decoration:none;
/* for text, you might want to add a width 
to make the tooltip write within a box */
/*this positions it relative to the link (edit if you want)*/
position:absolute; top:1em; left:1em;
/*edit anything below here to preference*/
padding:2px; border:1px solid Black; background-color:Gray;}

Now that that is all set, we just use our created elements to make our tooltip:

Code:

<a class="tooltip" id="tt1" href="#" >
 Roll over this
 <span>For this tooltip!</span>
</a>

Also, I used this to display pictures as as thumbnails, but on a rollover, shows them at 100% size (great for eBay):

Code:

<a class="tooltip" id="tt2" href="#">
 <img src="images/random.jpg" alt="small image" style="width:50px;" />
 <span><img src="images/random.jpg" alt="full image" /></span>
</a>

This way, everything that is within the <a> and the <span> is inside the tooltip, and everything that is within the <a> and outside the <span> is the thing that you rollover to view the tooltip.

sniperscope · 03-27-07

This is decent, nice one

		Overclock.net - Overclocking.net > Software, Programming and Coding > Coding and Programming > Web Coding
How To: Make CSS Tooltips/Picture Rollovers

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)