RichFaces 拡張データ テーブルは、レンダリングされると、すべてのオーバーフローを非表示に設定する外側の div を持ちます。したがって、テーブルの下部または右端の行にカーソルを合わせると、ツールヒントが部分的に非表示になるため、行ごとにツールヒントを表示してもうまく機能しません。
レンダリングされた HTML は次のようになります。明確にするために、RichFaces レンダリング エンジンは、3 行目の「overflow:hidden」を含む外側の DIV のスタイルの出力を完全に制御しています。
<div id="toplevelform:myTable" class="extdt-maindiv rich-extdt-maindiv">
<div id="toplevelform:myTable:od" class="extdt-outerdiv"
style="width:100%; height:100%; overflow:hidden;">
<!-- inner divs to display rows and columns with their
respective tooltips here -->
</div>
</div>
3 行目の "overflow:hidden" が問題の原因であり、クライアント側のポストフィックス (Firebug エディターなど) を使用して手動で削除すると問題は解決しますが、RichFaces フレームワーク内で解決して CSS がそもそも出力されません。
これを生成するために使用される RichFaces マークアップは、次のようになります。
<rich:extendedDataTable id="myTable" value="#{backingBean.myIterableProperty}" var="myPropVar">
<rich:column id="nameCol" width="100%">
<h:outputText value="#{myPropVar.name}"/>
<rich:toolTip direction="bottom-right" layout="block">
My tooltip text here...
</rich:toolTip>
</rich:column>
</rich:extendedDataTable>
クライアントに到達する前に修正する必要があるという制約がある場合、境界 DIV に制限されることなく、ツールチップを明確に表示するクリーンな方法はありますか?
ツールチップの方向を変更することも答えではありません。