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.

Lavettelavigne

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.

Throttle

Switching to primefaces 3 is not an option for me right now due to various reasons. However, I will accept your answer. Thanks. – Lavettelavigne

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: forum.primefaces.org/viewtopic.php?f=3&t=23575 – Cogan

But it's showing only on text in #{rowIndex}. Can you tell me how to show on whole row? – Makeweight

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.

Ollie

I have positioning problems while trying it with the global tooltip. – Potentiality