Tooltip for each row in data table

OschtärEi picture OschtärEi · Nov 22, 2013 · Viewed 20.3k times · Source

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.

Answer

Daniel Teleginski Camargo picture Daniel Teleginski Camargo · Jan 20, 2014

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}" />