Question

Does anyone know how I can show a tooltip whenever a user hovers over a row in my primefaces datatable? Also, the tooltip needs to display a primefaces tree and the data to populate the tree will need to be loaded before the tooltip is displayed.

I’ve tried a simple P.O.C by adding the tooltip to my <p:column> but the tooltip only shows for that column and I need to have the mouse directly over the text in the column for the tooltip to show. My P.O.C doesn’t have the tree in the tooltip because I haven’t figured that part out as yet.

Any help/suggestions will be greatly appreciated.

Answer 1

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.