I have a table with a bunch of cells. (No way! Amazing! :P) Some of
the cells have a small div that when you put your mouse over, it gets bigger so you can read all
the text. This works well and all. However, since html elements that come later in
the document have a higher z-index, when
the div gets bigger it is underneath
the other divs in
the other cells.
Some html code:
<table>
<tr>
<td>
limited info
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
informative long text is here
</div>
</div>
</td>
<td>
some short info
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
longer explanation about what is really going on that covers
the div up there ^^^. darn!
</div>
</div>
</td>
</tr>
</table>
Some js code:
function tooltipshow(obj)
{
obj.style.width = '30em';
obj.style.zIndex = '100';
}
function tooltiphide(obj)
{
obj.style.width = '1em';
obj.style.zIndex = '20';
}
It doesn't matter if I set z-index dynamically to something higher onmouseover. It's like z-index has no affect. I think it has something to do with
the table.
I've tested this in FF3. When I'm feeling particularly macho, I'll test it in IE.
