Tooltip in the Column Header of a Primefaces Datatable

Question

In an application based on JSF 2.1 and Primefaces 6.0, I am trying to add a tooltip to the header of a datatable.

In my current solution, the tooltip appears only when pointing the mouse precisely on the text title ("Projekttyp"). I need the tooltip to appear whenever the mouse pointer is in the column header. Unfortunately, it is not possible to assign an id to the facet header.

I understand that the global tooltip as described here Primefaces Showcase Tooltip can only be used in higher Versions of JSF (JSF 2.2).

Here is my code:

<p:column sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
          filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
          width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
    <f:facet name="filter">
        <p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
                     value="#{sucheForm.filter.typFilter}"
                     tabindex="1"
                     styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
            <p:ajax event="keyup" update="@(.updateableFromTableFilter)" delay="1500" />
        </p:inputText>
    </f:facet>
    <f:facet name="header">
        <h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
        <p:tooltip id="typTooltip"
                   for="typColumntitle"
                   rendered="true"
                   myPosition="left bottom" atPosition="right bottom"
                   hideDelay="500">
            <p:scrollPanel style="width: 300px;height:200px">
                <p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
                    <p:column headerText="Projekttyp" width="30%">
                        <h:outputText value="#{typ.inhalt}"/>
                    </p:column>
                    <p:column headerText="Bemerkung" width="70%">
                        <h:outputText value="#{typ.bemerkung}"/>
                    </p:column>
                </p:dataTable>
            </p:scrollPanel>
        </p:tooltip>
    </f:facet>
    <h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>

Friedland

Answer 1

Add the f:facet tag like the above and it will work fine (I mean tooltip value will be displayed); if you hover your mouse anywhere inside the column header.

Even outside the text in the column header.

<p:column id= "keyColumnId">
<f:facet name="header">
     <h:outputText value="YOUR COLUMN HEADER" />
     <p:tooltip value="TOOLTIP VALUE TO SHOW" for="keyColumnId" />
</f:facet> 
</p:column>

Gregarine

Answer 2

PrimeFaces supports 'jquery' selectors in the for attribute of the p:tooltip. You effectively need to select the 'parent' of the element with id typColumntitle, so this will (most likely) work.

<p:tooltip id="typTooltip"
    for="@(#typColumntitle:parent)"
    rendered="true"
    myPosition="left bottom" atPosition="right bottom"
    hideDelay="500">

Raggedy

See also: PrimeFaces Extensions tooltips (<pe:tooltip />) primefaces.org/showcase-ext/sections/tooltip/… primefaces.org/showcase-ext/sections/tooltip/sharedTooltips.jsf qtip2.com/options#style – Flatfish

Answer 3

i committed pavan_115544's answer , it works fine but when i get export datatable to excel, column names disappeared. So i find another solution, it is not tooltip, it is title for column and looks very good. thanks all.

<p:column filterBy="#{eftSwiftMutabakatDTO.relatedRef202}" style="width:5%"
                        headerText="RELATED REFERANCE 202"
                        sortBy="#{eftSwiftMutabakatDTO.relatedRef202}"
                        filterMatchMode="startsWith">
                        <h:outputText id="swfrf202" value="#{eftSwiftMutabakatDTO.relatedRef202}"/>
                        <f:facet exportable="false" name="header" >
                            <h:outputText value="Gelen/Giden" title="Gelen/Giden"/>
                        </f:facet>
                    </p:column>

Moran

Answer 4

Solving this problem turned out to be easy in the end. I just had to assign an id to the column <p:column id="columnwithtooltip" and adjust the for="columnwithtooltip" in the tooltip accordingly:

<p:column id="projekttypColumn" sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
          filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
          width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
    <f:facet name="filter">
        <p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
                     value="#{sucheForm.filter.typFilter}"
                     tabindex="1"
                     styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
            <p:ajax event="keyup" update="@(.updateableFromTableFilter)" delay="1500" />
        </p:inputText>
    </f:facet>
    <f:facet name="header">
        <h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
        <p:tooltip id="typTooltip"
                   for="projekttypColumn"
                   rendered="true"
                   myPosition="left bottom" atPosition="right bottom"
                   hideDelay="500">
            <p:scrollPanel style="width: 300px;height:200px">
                <p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
                    <p:column headerText="Projekttyp" width="30%">
                        <h:outputText value="#{typ.inhalt}"/>
                    </p:column>
                    <p:column headerText="Bemerkung" width="70%">
                        <h:outputText value="#{typ.bemerkung}"/>
                    </p:column>
                </p:dataTable>
            </p:scrollPanel>
        </p:tooltip>
    </f:facet>
    <h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>

Friedland

And you did not try this before posting ;-)... Good it works. Personally forgot that indeed columns can get id's to. – Raggedy

Indeed... I was frustrated by the fact, that the facet header has no id. I didn't think about the column at first, because I thought it would affect the entire column, and not just the header. – Friedland