Tooltip for each row in data table
Solution 1
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}" />
Solution 2
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>
Solution 3
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>
OschtärEi
Updated on November 05, 2020Comments
-
OschtärEi over 3 years
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
#table1
is 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.
-
alfonx almost 10 yearsThat 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.
-
NeplatnyUdaj over 9 yearsI'm trying to do the same thing, but I'm getting
Cannot convert rowIndex of type class java.lang.String to int
. Any ideas? -
giaffa86 over 9 yearschange it to rowIndexVar
-
Serban Gorcea almost 7 yearsIf 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.