infobulle dans la colonne en-tête d'un Primefaces Datatable

Question

Dans une application basée sur JSF 2.1 et Primefaces 6.0, je suis en train d'ajouter une info-bulle à l'en-tête d'un datatable.

Dans ma solution actuelle, l'info-bulle s'affiche uniquement lorsque vous pointez la souris précisément sur le titre du texte ("Projekttyp"). J'ai besoin de l'info-bulle pour apparaître chaque fois que le pointeur de la souris est dans l'en-tête de la colonne. Malheureusement, il n'est pas possible d'attribuer un identifiant à l'en-tête de la facette.

Je comprends que l'info-bulle globale décrite ici enter link description here ne peut être utilisée que dans les versions supérieures de JSF (JSF 2.2).

Voici mon 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> 

Answer 1

PrimeFaces soutient 'jquery' selectors dans l'attribut for du p:tooltip. Vous avez effectivement besoin de sélectionner le 'parent' de l'élément avec l'ID typColumntitle, donc cela fonctionnera (très probablement).

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

Answer 2

La résolution de ce problème s'est finalement révélée facile. Je devais attribuer un identifiant à la colonne <p:column id="columnwithtooltip" et ajuster la for="columnwithtooltip" dans l'infobulle en conséquence:

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

Answer 3

Ajouter le tag f:facet comme ci-dessus et cela fonctionnera très bien (je veux dire la valeur infobulle sera affichée); si vous passez votre souris n'importe où dans l'en-tête de la colonne.

Même en dehors du texte dans l'en-tête de colonne.

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