CODEWITHSUNDEEP
jsf-2primefacesdatatabletooltip
midoDev
midoDev

Reputation: 97

Show Tooltip when mouse over the header column dataTable

How to show tooltip for the header of dynamic Table p:dataTable when the mouse over the header to display the entire title of header column.

<p:dataTable id="detailDataTable" widgetVar="detailWidgetVar"
 value="#{model.elements}" var="element"

paginator="false" resizableColumns="false" scrollWidth="100%"
 scrollable= "true" emptyMessage="Aucun résultat"
styleClass="tableResultat" rowStyleClass="">
<p:columns value="#{model.columns}" var="column" columnIndexVar="colIndex"
headerText="#{column.header}"
styleClass="#{column.styleClass}" width="#{column.width}"
sortBy="#{(element[column.productId])[column.property]}">
<h:outputText value="#{(element[column.productId])[column.property]}"
title="#{(element[column.productId])[column.property]}"/>
                        </p:columns>
                    </p:dataTable>

Upvotes: 6

Views: 12761

Answers (1)

kolossus
kolossus

Reputation: 20691

You could use the Global Primefaces Tooltip; You just need to change your approach to setting the header text, using the <f:facet/> rather than the headerText attribute. Using your code sample

   <p:tooltip/>

   <p:columns value="#{model.columns}" var="column" columnIndexVar="colIndex"
        headerText= styleClass="#{column.styleClass}" width="#column.width}" sortBy="#{(element[column.productId])[column.property]}">
     <f:facet name="header">
          <h:outputText value="#{column.header}" title="#{column.header}"/>
     </f:facet>
        <h:outputText value="#{(element[column.productId])[column.property]}" title="#{(element[column.productId])[column.property]}"/>
   </p:columns>

Two things have happened

  1. I've defined a global <p:tooltip/>
  2. Using the HTML-standard title attribute on the header facet text. This is what hooks into the global tooltip, to display tooltip text per column

Upvotes: 13

Related Questions