JSF 2.0 + Primefaces 2.x: Tooltip for datatable row
You may consider moving to latest version of PrimeFaces and start using overlayPanel for this. This will exactly fit your requirement.
<p:dataTable value="#{myBean.myDetails}" var="myItem" rowIndexVar="rowIndex" >
<p:column>
<f:facet name="header">
<h:outputLabel value="#"/>
</f:facet>
<h:outputLabel value="#{rowIndex}" id="myLbl"/>
<p:overlayPanel id="myPanel" for="myLbl" showEvent="mouseover" hideEvent="mouseout">
<p:panelGrid columns="2">
<f:facet name="header">Details In Tree</f:facet>
<h:outputLabel value="Column 1 of Table" />
<h:outputLabel value="#{dataItem.Col1}" />
<h:outputLabel value="Column 2 of Table" />
<h:outputLabel value="#{dataItem.Col2}" />
</p:panelGrid>
</p:overlayPanel>
</p:column>
.....
.....
</p:dataTable>
In the above example, data of a row is displayed in labels as user moves the mouse on table rows. We can as well display tree in the overlayPanel as per your requirement.
Hope this helps.
I was trying to find a nicer solution and found the shared tooltip of primefaces extensions.
I made this solution work in my code:
<p:dataTable var="entry" value="#{....}" rowIndex="rowIndex" styleClass="myTable">
<p:column headerText="Header 1">
<h:outputText value="#{entry.value1}" />
</p:column>
<p:column headerText="Header 2">
<h:outputText value="#{entry.value2}" />
<pe:tooltip value="This is row number #{rowIndex}" forSelector=".myTable tr[role=row][data-ri=#{rowIndex}]"
shared="true" atPosition="top center" myPosition="bottom center" showDelay="500" />
</p:column>
</p:dataTable>
The datatable needs a styleClass, because the selector of the tooltip must only match this table and no other tables.