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.

score 7 · Accepted Answer · answered Apr 03 '12 at 06:39

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.

Switching to primefaces 3 is not an option for me right now due to various reasons. However, I will accept your answer. Thanks. — Justin Kredible, Apr 03 '12 at 16:23
This wont work as the overlayPanel is "truncated" by the row boundaries. One has to add `appendToBody="true"` on the overlayPanel. This issue apperently appeared with 3.3: http://forum.primefaces.org/viewtopic.php?f=3&t=23575 — Sebastian Hoffmann, Aug 14 '12 at 13:22
But it's showing only on text in #{rowIndex}. Can you tell me how to show on whole row? — Venkat Maridu, Jan 24 '13 at 11:23

score 1 · Answer 2 · edited Sep 12 '19 at 09:53

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.

I have positioning problems while trying it with the global tooltip. — Pieter De Bie, Aug 06 '15 at 14:03

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

2 Answers2

Linked