Search code examples
jsf-2primefacesdatatabletooltipprimefaces-extensions

Tooltip for each row in data table


This questions screams to be a duplicate of JSF 2.0 + Primefaces 2.x: Tooltip for datatable row but since this old question has NO working/satisfying solution for me and there's no way (?) to get attention back to it I opened this new one.

It's very simple: I have a dataTable (with JSF-standard or with primefaces) and I'd like to add a different tooltip for EACH row (not just for one field in it!).

What I tried so far:

<pe:tooltip value="This is row number #{rowIndex}"
    for="@(#table1 tr[role=row][data-ri=#{rowIndex}])" 
    atPosition="top center" myPosition="bottom center"
    shared="true" />

where #table1is the ID of my data table . This came to my mind because of this.

And both solutions from JSF 2.0 + Primefaces 2.x: Tooltip for datatable row : the first solutions works, but only for ONE field / id and not for the whole row. The second solution won't work at all for me.

And I'm 100% sure that both - primefaces & primefaces extensions - are working for me, I tested it.


Solution

  • I've done some test and this approach works perfectly:

    <p:dataTable var="entry" value="#{....}" styleClass="myTable" rowIndex="rowIndex">
        <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>
    

    Note that in order to the data-ri attribute to be placed on datatable rows, you need the to add the attribute rowIndex (rowIndex="rowIndex").

    It also worked with

    <p:tooltip for="@(.myTable tr[role=row][data-ri=#{rowIndex}])" value="This is row number #{rowIndex}" />