Simple javascript mouseover tooltip

May 16, 2008

Posted in: Computers, HTML, Javascript, Programming

Tags: checkbox, control, function, getElementById, innerHTML, Javascript, mouseout, mouseover, rickroll, rowspan, tooltip

So I wanted something simple, easy that could handle the information that explains what these options mean. There’s so many way to handle this, and some are more powerful (see if you can find the rickroll), and other aren’t, using the title=”" attribute in a link. The one I’ve done is closer to the simple, but allows for a little more control and looks a lot better!

So I have a form with a number of checkboxes and radio buttons. There’s a lot of stuff going on there, like 23 or more. I can’t remember all them, and so when people ask me what this one does, or that one controls I have to dig through some code to remember what they are for (yes I can guess, but I’m too lazy for any of it).

So what I did was add a little famfamfam silk ‘help’ icon next to each one, and gave it a mouseover event to show a tool tip.

Before you go on thinking it does anything amazing, it really doesn’t, it just shows information, where I want it to.

Click on the image there to see what it looks like. You’ll notice the little help icon (question mark) and where the tooltip shows up.

It’s probably not very friendly to xhtml or anything because it based on tables and rowspans (wait till I show you that one), and it may not be supported in IE (Firefox is only used in this application), but I bet it wouldn’t take much to make it so.

Did you know Javascript could change the rowspan of a table? I didn’t know either until I started digging around on this. I kept running into a problem with each subsequence tip stepping out further and further. I uncovered it by showing a border on the cell I was putting it in.

I could tell what was happening, but wasn’t sure of how to fix it, the I just googled “javascript rowspan” and found that it does handle that property.

document.getElementById('elem').rowSpan = 1

That stinking 1 really through me for a loop for awhile. I wanted it to expand to 6, but then I needed it to go back to what it was before, foolish me, thinking since I don’t have a rowspan to begin with, I’ll make it equal blank, or just not have it there. No, that doesn’t work, you need to set it back to one on the mouse out. Don’t worry I’ll show you.

Let’s go over the javascript function first, the mouseover/outs are easy.

function info_over(id) {
	switch (id) {
		case 'account': info = '" . $account . "';
		break;
		case 'plaza': info = '" . $plaza . "';
		break;
	}
var box = '<table cellpadding=0 cellspacing=0 width=150px><tr><td class=over_pointer><img src=\"/images/info_pointer.gif\" align=\"top\"/></td><td class=over_info>'+info+'</td></tr></table>';
	document.getElementById(id).innerHTML = box;
	document.getElementById(id).rowSpan = 6;
}

So what is happening here is I’m passing the id I want to show it in, that also tells it what information to put in the box - I know I’m using PHP variables inside the javascript, but it was because there were so many and I trying to write them easier, blah blah blah…it doesn’t matter you can write the statements either way.

Then I send it all back to the element (id) to display it, the over_pointer image is a left pointing triangle that give it that neat look. But butts up to the edge and blends in.

The mouseout sets it back.

function info_out(id) {
	document.getElementById(id).innerHTML = '';
	document.getElementById(id).rowSpan = 1;
}

Wait!

We need to set some stuff in the style sheet so it places it all correctly, I’m fairly certain this could be done in the javascript, but I didn’t want to mess up other styles because of it - so I just stuck in my css.

#account,#plaza {
	vertical-align: top;

}
.over_pointer {
	vertical-align: top;
	margin: 0 0;
	width: 15px;
	background: #ffffff url(/images/info_pointer_bk.gif) repeat-y right;
}
.over_info {
	margin: 0 0;
	border: 1px solid #efefef;
	border-left: none;
	background: #FFFFA6;
	padding: 5px;
}

The vertical-align keeps it on the line across from the icon, otherwise it would move to the middle and point to a different one.

The last bit is the html. Easy enough, but remember this is all table based so if you want to use tableless, have fun with that, and let me know how it went.

<tr>
	<td class='report_columns'>Account Information <img src='/images/help.png'  align='absmiddle' onmouseover='info_over(\"account\");' onmouseout='info_out(\"account\");'/></td>
	<td class=report_columns align=center><input type='checkbox' name='acct_read_auth'></td>
	<td class=report_columns align=center><input type='checkbox' name='acct_write_auth'></td>
	<td id='account'></td>
</tr>

So you call the mouseover and send it the id to show it in, and the mouseout removes it.

Super simple, super easy…

Posted in Computers, HTML, Javascript, Programming