Catching Up On The Zs

Posted: 20/01/11

It's a Matter of Context

A recent project that I worked on required a custom "tooltip" to work on a table of data, popping up more information than you could reasonably expect to get in the table cell. The table cells were constrained in size, and used some relative positioned elements with absolute positioned children.

I am rather a fan of the Flowplayer tooltip jQuery plugin - it's dead simple to use and just works, usually. The initial design worked well in Firefox, Internet Explorer 8, all the other major browsers, but it all went wrong with Internet Explorer 7.

The problem was that the tooltip was popping up partially behind the data in the table. The obvious thing to do was to increase the css z-index of the tooltip - but there was no effect, even when the z-index was massively greater than anything else.

The problem, not surprisingly, was a "feature" of IE7 that causes it to create a new "stacking context" when ever it encounters a relatively positioned item which has the default z-index value of auto. The CSS spec states that a new stacking context is only to be created when the z-index is other than auto. Elements within the same stacking context obey the z-index value as you might expect, but another context will sit on top of these elements, no matter what you set the z-index to.

Because each of the table cells contained a relatively positioned element, in addition to the div required to hold the tooltip text, it wasn't possible to set up the elements to achieve the context required.

My solution in the end was to use the tooltip's ability to specify an empty element ID to use for the tooltip text, but to populate it with an AJAX call before showing it.