js and CSS expanded tooltips, browser bugs

Pop-in text from onmouseover triggered CSS manipulation. This text is in a <div> outside the tables.

Row 1 has javascript mouseover/mouseout-based popin; row 2 has a purely CSS-based "hover" popin. Both of these have the popped in span within the table cell.

DateOperation
8/15/00 Pop-in text from onmouseover-triggered style sheet manipulation, with the text in a <span> within the <td>. js mouseover triggered tooltip
8/16/00 a:hover triggered tooltip Pure CSS approach, on the a:hover pseudo-class The text is <span>ned inside the <a> contents.


Look what happens when this content overruns other <table> elements!

IE6: pop-in positioned acceptably, but all <table> contents outside spawning cell have a higher z-index.
Fx1.5: row 1 puts pop-in in <body> positioning context; the style callout of td {position: relative;} is not being honored. The text in the next table shows through. (Note the white header text, too.) Pop-in gets width of spawning element (not the <tc>).

Some link outside the tables

Here row 1 uses js, but with the referenced pop-in text w/in a separate <div> outside the table.

DateOperation
8/15/00 mouseover-triggered, tip text outside table
8/16/00 Plain old table entry (w/title attribute)

IE and Fx: position the same (in <body> context, which can be scrolled off the screen!), and style width, etc. the same way.

Some link outside the tables

Motivation

We'd like to extend the limited "tooltip" display of the title attribute of HTML elements in mainstream browsers. Firefox used to only show 40 characters; I see it's up past 80 now. IE has a more generous limit, and might suffice all on its own. (Can we get at its rendering method for Fx?!) And there are lots more browsers than I have handy for testing. Who knows what they're up to?

The one method that works the same in both browsers is having the "pop-in" text in a <div> outside the table. This needs the onmouseover trigger; a:hover can't act on content outside its element. It can be flickery if ephemeral text overlays the element that spawned it, but adding the same onmouseover and onmouseout scripting to the pop-in fixes that issue. Big problem: if the absolute position called out for the pop-in is scrolled off the screen, you won't see it, won't know anything is happening.

With the pop-in inside a <span> in the table cell, we get the more useful positioning relative to the element, but only for the CSS "hover" method in both browsers. However, the content of the table shows through the span; as if it has a transparent background (but only for the text in the table!). Fx also styles the popped-in text's width to match the <a> that spawned it, vs. IE using the width of the table cell (based on the longest element in the table). We prefer the latter.

The "text of the table only" aspect makes this different than the reported IE z-index bug; the issue isn't stacking order, nor is it specific to IE. The problem is variable transparency. Oddly, I haven't found anyone else reporting this problem, but I may just have failed to say the magic word.

We might reserve some FIXED layout space for our little popin, insuring it had room to land. Then we'd need to know how big the biggest pop-in is (with the user's font size)... and leave a weird "blank spot" in the layout.

<a> elements give the user the affordance of expecting more information... even though we're making the href attribute a no-op.