Tooltip for each row in data table

Question

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.

See also: https://stackoverflow.com/questions/46116670/tooltip-in-the-column-header-of-a-primefaces-datatable — Andrew, Oct 25 '17 at 17:06

score 10 · Accepted Answer · answered Jan 20 '14 at 15:22

10

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

answered Jan 20 '14 at 15:22

Daniel Teleginski Camargo

4,263
2
33
54

That works nicely: The selector works for the full row, so it doesn't have to be defined for each column. The standard use-case would be to have e.g. value="entry.tooltiptext". This should be marked as the right answer. – alfonx Aug 08 '14 at 21:37
1

I'm trying to do the same thing, but I'm getting `Cannot convert rowIndex of type class java.lang.String to int`. Any ideas? – NeplatnyUdaj Nov 07 '14 at 11:59
2

change it to rowIndexVar – giaffa86 Jan 14 '15 at 14:47

score 5 · Answer 2 · answered Jul 14 '15 at 10:39

You can also do it without using primefaces extensions. This example code works for me with primefaces 5.2. Be aware that in primefaces 5.2 the p:dataTable attibute is rowIndexVar and not rowIndex as in the example above.

<h:form id="idform">

<p:dataTable var="komp" 
    id="idDataTable" 
    value="#{kompselect.listKomponenten}"
    rowIndexVar="rowIndex"
    selection="#{kompselect.selectedKomponente}"
    rowKey="#{komp.name}">
    <p:column>
        <h:outputText id="otSelKomponente" value="#{komp.name}" />
        <p:tooltip  rendered="#{komp.displayToolTip}"
                for="idForm:iddataTable:#{rowIndex}:otSelKomponente"
                value="this is my Tooltip"/>

    </p:column>
</p:dataTable>

score 3 · Answer 3 · edited May 23 '17 at 11:47

according to this commment https://stackoverflow.com/a/13327334/4851983 (thaks BalusC ) Let primefaces link the objects automatically. I could show a tooltip for a textArea Primefaces 3.5 , as is show below

<p:dataTable id="commentsTable"
         value="#{historyReq.commentsFromReq}" var="comment"
         emptyMessage="#{localeMsg.roles_table_empty}" 
         rows="10"                                                                                                                                                               
         styleClass="myTable"
         rowIndexVar="rowIndex">

<p:column headerText="HEADER A">
    <h:outputText value="#{bean.valorA}" />
</p:column> 

<p:column headerText="#{HEADER B}">                                                
        <p:inputTextarea  id="txtArea"  cols="45" rows="1"   
                           value="#{bean.valorB}" 
                           readonly="true" 
                           disabled="false"  
                           autoResize="false">
            <f:converter converterId="commentsConverter" />
        </p:inputTextarea>                                                                                                
         <p:tooltip for="txtArea" value="This is row number #{rowIndex}" />             
</p:column>

If I am not making a mistake, his example is a static one while you are trying to put an id on a component that will repeat over and over again. So on every row you have a text area with the same id, which will not work. — Serban Gorcea, Aug 09 '17 at 15:45

Tooltip for each row in data table

3 Answers3

Linked