How To Do Easy Tooltip Popups

This was something I thought of doing (originally, I was trying to make it CSS only, but I ran into problems with IE), so I figured why not make an extra easy to understand, good looking CSS/Javascript tooltip.

What we’re going to be making is a popup tooltip (or help box) that pops up once you over an icon, (in this case, a question mark). The method that we will look over validates for both CSS and HTML.

Demo

Click here to see a demo.

Stylesheet

The CSS is pretty straight-forward. Once you put this on your site, you can place as many tooltips as you like on your website, and you can style them with one chunk of CSS. I’ve taken the liberty of adding comments in the CSS to explain some of the attributes. Unless I say otherwise, these attributes are required.

.questionMark {
position:relative;
height:26px; /*dimensions of our image*/
width:26px;
background:url(/wp-content/questionMark.gif) top left no-repeat;
}
.toolTip {
position:absolute;
left:26px; /*Moves it to the right beside the question mark*/
top:0;
display:none;
/*The attributes below make it look pretty*/
width:100px;
padding:5px;
border:1px solid #ffffff;
background-color:#eeeeee;
font:10px/12px Arial, Helvetica, sans-serif;
}

That seems easy doesn’t it? Let’s jump into the HTML (and Javascript).

Code

<div onmouseover=”document.getElementById(’tt1′).style.display=’block’” onmouseout=”document.getElementById(’tt1′).style.display=’none’” class=”questionMark”>
<div id=”tt1″ class=”toolTip”>Eat your vegetables. Brush Your Teeth</div>
</div>

As you can see, the html code is a little more complicated, but I’ll explain.

What we have is our question mark div container (class=questionMark), within it, we have our tooltip (class=toolTip). I created some Javascript that looks for the id name of the tooltip: id=tt1, and makes it visible when the question mark is moused over, of course, when the mouse leaves the question mark, the tooltip is made invisible.

In terms of scalability, since Javascript requires a unique id (or class) name to do this, you’d only have to increment the value after the “tt” (eg. tt2, tt3, tt4…). The style will be retained so across the board updates should be easy.

Hope that helps.

Related Posts

• New Big Contender in the Text Link Market?
• Applications That Make Web Development Easier
• 7 Tips On Getting Those First Visits To A New Website