JSF 2.0 + Primefaces 2.x: Tooltip for datatable row

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.

Answer 2

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.