わかりましたので、ツールチップのすべての親レベルの div / 要素の z-index をオーバーライドしようとしていますが、使用する必要があるテーブル設定では難しいことがわかりました。
前の JS Fiddle では、一番下の行 (#3) にカーソルを合わせると、カーソルを合わせたときにツールヒントが行 #2 の「コンテンツ」という単語を覆うことがわかります。これは、Z インデックスがそれぞれの親から継承されているため (私が思うに)、等しいためです。その結果、スタックの順序は DOM 自体内の出現順序によって決定されます。このため、ツールチップはその上の行のコンテンツをすべてカバーし、その下の行のコンテンツをカバーしません。
私は解決策を探していますが、それが不可能かもしれないことはわかっていますが、私が間違っていることを願っています!
では、td 要素の z-index プロパティをそのままにしておくのはどうでしょうか?
それがあなたが手に入れたかったものだと思いますよね？:)
ところで：「テーブル行グループ、テーブルヘッダーグループ、テーブルフッターグループ、テーブル行、テーブル列グループ、テーブル列、テーブルセル、およびテーブルに対する 'position:relative' の効果-caption 要素は未定義です。」、したがって、td 要素で相対的な位置を使用したくないかもしれませんが、代わりに td 要素またはそれに類似したもので子 div を使用します:)
position: relative で div を最初の行に追加しました。違いがわかります (最新の firefox などを使用している場合)。
この特定の Z インデックスの問題は回避できないと確信しています。@r3bel と広範囲にわたって議論した回答は、私の特定のユース ケースを考慮しておらず、JS Fiddle は完全に正しい解決策ではありません。
z-indexスタック内の位置が尊重されるように動的にポップオーバーを追加するTwitter Bootstrapのbootstrap-popover.jsプラグインを使用することになりました。<body>