Z-index & Tooltips in Tables (DOM order of appearance)
===

Ok, so I'm trying to override z-index of all parent-level divs / elements on tooltips and it's proving difficult with the table setup that I need to use.

http://jsfiddle.net/Z9H4U/

In the preceding JS Fiddle, hovering the bottom row (#3), you'll se that the tooltip covers the word "Content" from row #2 when hovered.  This is because the Z-index is inheriting from the respective parents (I think) and therefore equal.  As a result, the stack order is determined by the order of appearance within the DOM itself.  For this reason, the tooltip covers any content in the row above it and fails to cover any content in the row below it.

I'm looking for a solution and I know it may be impossible, but I'm just hoping I'm wrong!