Primefaces数据表的列标题中的工具提示 [英] Tooltip in the Column Header of a Primefaces Datatable
问题描述
在基于 JSF 2.1 和 Primefaces 6.0 的应用程序中,我试图将工具提示添加到数据表的标题中.
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.
在我当前的解决方案中,仅当将鼠标精确指向文本标题("Projekttyp")时,才会显示工具提示.每当鼠标指针位于列标题中时,我都需要显示工具提示.不幸的是,无法为构面标头分配ID.
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.
我了解此处所述的全局工具提示 Primefaces展示工具提示仅可用于更高版本的JSF(JSF 2.2).
I understand that the global tooltip as described here Primefaces Showcase Tooltip can only be used in higher Versions of JSF (JSF 2.2).
这是我的代码:
<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>
推荐答案
像上面一样添加f:facet
标记,它将正常工作(我的意思是将显示工具提示值);如果您将鼠标悬停在列标题内的任何位置.
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>
这篇关于Primefaces数据表的列标题中的工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!