scrollableDataTable: components in rows are cut off at table

[styx2000]

Hello,

I use a scrollableDataTable and want to show an icon with a tooltip in every row.
The problem I have is that the tooltip is cut of at the end of the table cell border, i.e. it only shows in the table cell where the icon is placed.
Now i added a context menu and have the same problem there.

I saw the example on the demo-page where there is a table with a tooltip and also a table with a context menu and it works fine (although those are rich:dataTable components not scrollableDataTable)

So my question is, does this work for anybody and if yes a code-fragment would be appreciated.

PS: Regarding the tooltip the documentation says the parent should have an id which it does not have in my code, because its a table row (all table rows would have the same id if i woult enter one). But at least the context menu should work.

PPS: my code is:

<rich:scrollableDataTable value="#{bbStatementSearchResults.searchResults}"
 var="elem" width="100%" height="400px" rowKeyVar="#{row}"
 selection="#{bbStatementSearchResults.selection}">
<rich:column>
<f:facet name="header">
<h:outputText value="Column header 2"></h:outputText>
</f:facet>
 <h:graphicImage id="asdfasldg" value="/images/history_small.gif">
 <rich:toolTip styleClass="tooltip-text">
 <h:outputText value="test"/>
 </rich:toolTip>
</h:graphicImage>
</rich:column>

[steven.whatmore]

We experienced the same problem and it was solved using the following:

<rich:column width="24px" style="sdt-column-details" cellStyle="overflow:visible;z-index:100;">
 <a4j:commandButton id="chrDetials" styleClass="details-button" action="#{action.detials}" onclick="Richfaces.showModalPanel('detailsMP');">
 <rich:toolTip direction="bottom-left" zorder="200" followMouse="true" layout="block" >
 <h:outputText styleClass="output-text-label-right" value="#{msgs['details.tooltip']}" />
 </rich:toolTip>
 <a4j:actionparam name="id" value="#{details.id}" assignTo="#{action.id}"/>
 </a4j:commandButton>
</rich:column>

Where I believe the important parts are the cellstyle attribute on the column and the attributes on the tooltip

I hope this helps.

Whatty

[styx2000]

Great, it works, thanks a lot!

The attribute

cellStyle="overflow:visible"

on the column seems to be enough, although i didn't reallly test it very well yet.

Thanks again!

bye

[styx2000]

Hello,

I spent quite some time on this problem and i still dont get it right. It's actually more a CSS problem, but i thought there are some people on this forum who already found a solution and can post their css-code.

When I use style="overflow:visible" then the tooltip is not cut off at the cell-border, but it overlays the next cell (so you can see the cell-content and the tooltip-content together, which is not readable off course).
Also it still gets cut off at the table border.

Target browser for the application is IE6.0. (It seems to work slightly better in Mozilla).

If somebody has found a way to use tooltips or context-menus or something like that in a richScrollableDataTable i would really appreciate some code.

@steven.whatmore:
does the tooltip work for you without overlaying neighbouring cells? and does it get cut off at the table border? if not, did you add some more css-styles to your table?


Thanks a lot,
bye