Show tooltip on mouse over dataTable header column

Question

How to show a tooltip for a p: dataTable dynamic table header when the mouse above the header displays the entire header of the 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> 

Answer 1

You can use the tooltip for global price lists ; You just need to change your approach to customizing the header text using the <f:facet/> attribute, not the headerText . Using sample code

  <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 happened.

• I defined a global <p:tooltip/>
• Using the standard HTML title attribute in the text of the title graph. This is what captures the global tooltip to display tooltip text for each column.