将鼠标悬停在标题列数据表上时显示工具提示

Posted 2023-02-23

【中文标题】将鼠标悬停在标题列数据表上时显示工具提示

【英文标题】：Show Tooltip when mouse over the header column dataTable

【发布时间】：2014-03-09 10:46:08

【问题描述】：

当鼠标悬停在表头上时如何显示动态表p:dataTable表头的工具提示以显示表头列的整个标题。

<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" 
sortBy="#(element[column.productId])[column.property]">
<h:outputText value="#(element[column.productId])[column.property]"
title="#(element[column.productId])[column.property]"/>
                        </p:columns>
                    </p:dataTable>

【参考方案1】：

您可以使用Global Primefaces Tooltip;您只需要更改设置标题文本的方法，使用<f:facet/> 而不是headerText 属性。使用您的代码示例

   <p:tooltip/>

   <p:columns value="#model.columns" var="column" columnIndexVar="colIndex"
        headerText= styleClass="#column.styleClass"  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>

发生了两件事

我已经定义了一个全局<p:tooltip/> 在标题方面文本上使用 html 标准的 title 属性。这就是全局工具提示的挂钩，用于显示每列的工具提示文本