jsf - Información sobre herramientas en el encabezado de columna de una tabla de datos Primefaces

datatable tooltip

Question

En una aplicación basada en JSF 2.1 y Primefaces 6.0 , estoy tratando de agregar una información sobre herramientas al encabezado de una tabla de datos.

En mi solución actual, la información sobre herramientas aparece solo cuando se apunta el mouse con precisión sobre el título del texto ("Projekttyp"). Necesito que aparezca la información sobre herramientas siempre que el puntero del mouse esté en el encabezado de la columna. Desafortunadamente, no es posible asignar una identificación al encabezado de la faceta.

Entiendo que la descripción global de la herramienta, tal como se describe aquí, ingrese la descripción del enlace. Aquí solo se puede usar en versiones superiores de JSF (JSF 2.2).

Aquí está mi código:

<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

La solución de este problema resultó ser fácil al final. Solo tenía que asignar una identificación a la columna <p:column id="columnwithtooltip" y ajustar la <p:column id="columnwithtooltip" for="columnwithtooltip" en la información sobre herramientas en consecuencia:

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

PrimeFaces admite los selectores ''jquery'' en el atributo for del p:tooltip . Efectivamente necesita seleccionar el ''padre'' del elemento con id typColumntitle, por lo que esto (muy probablemente) funcionará.

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