tooltip for rows of a column in table

Community Driven Extensions Project
Post Reply
vineet
Posts: 387
Joined: 14 Oct 2011, 23:40

20 Oct 2012, 07:47

Hi ,

I need to add tooltip when user hover on any row of a particular column in the datatable .

<p:column id = "test" style="text-align:center" sortBy="#{delv.dealerRep}"
filterBy="#{delv.dealerRep}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{msg['lbl.admin.requestor']}" />
</f:facet>
<h:outputText value="#{delv.dealerRep}" style="float:left;"/>
</p:column>

<pe:tooltip forSelector="?????" value="This tooltip uses slide effect for the animation" showEffect="slideToggle"
hideEffect="slideToggle" showDelay="0" myPosition="left center" atPosition="right center"/>

How should the tooltip be defined ?

Using PF3.4 , PF ext 0.5.1

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

20 Oct 2012, 16:10

Like what we have in "documentation" layout pane? http://fractalsoft.net/primeext-showcas ... ooltip.jsf

Look in Firebug please to see CSS class for rows to use it in forSelector.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4344
Joined: 16 Oct 2011, 19:19
Location: Singapore

24 Oct 2012, 16:22

Hi Oleg,

I tried to give the jquerySelector for one of the datatable column whose outputText value wrapped with commandLink like this

Code: Select all


<p:column id="deductions" style="text-align:center;" sortBy="#{transaction.totalDeductions}">
				<f:facet name="header">
					<h:outputText value="#{msg['lbl.common.total']} #{msg['lbl.stmt.deductions']}" />
				
				</f:facet>
				<p:commandLink id="deduction">
				<h:outputText value="#{transaction.totalDeductions}" style="float:right"/>
				</p:commandLink>
				
			</p:column>
I was able to give data table filter jquerySelector without any issues before.What will be the correct jquery selector for command link in the below firebug generated HTML Code?

Code: Select all

<tbody id="form:trans:tbl_data" class="ui-datatable-data ui-widget-content">
<tr class="ui-widget-content ui-datatable-even" aria-selected="false" role="row" data-rk="1" data-ri="0">
<td style="text-align:center;" role="gridcell">
<td style="text-align:center" role="gridcell">
<td style="text-align:center" role="gridcell">
<td style="text-align:center;" role="gridcell">
<td style="text-align:center;" role="gridcell">
<td style="text-align:center;" role="gridcell">
<td style="text-align:center;" role="gridcell">
<td style="text-align:center;" role="gridcell">
<div class="ui-dt-c">
<a id="form:trans:tbl:0:deduction" class="ui-commandlink" onclick="PrimeFaces.ab({source:'form:trans:tbl:0:deduction'});return false;" href="#">
</div>
</td>
<td style="text-align:center;" role="gridcell">
</tr>
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

24 Oct 2012, 17:26

I would try as selector ".ui-datatable .ui-commandlink".
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest