我可以在 primefaces 中显示禁用命令按钮的工具提示吗？答案

【问题标题】：Can I show tooltip for a disabled command button in primefaces?我可以在 primefaces 中显示禁用命令按钮的工具提示吗？
【发布时间】：2012-03-26 07:59:08
【问题描述】：

是否有一个功能可以在primefaces中为禁用的commandButton显示工具提示。

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

在这个问题中解释了@Kukeltje 为什么工具提示在禁用的命令按钮上不起作用：PrimeFaces 6.2 commandButton title not working when commandbutton is disabled

类.ui-state.disabled如果其 disabled 属性设置为 true，则添加到按钮：

.ui-state-disabled {
    cursor: default !important;
    pointer-events: none;
}

为了显示工具提示，您可以创建如下内容：

<p:commandButton id="testButton" disabled="true"
   action="yourAction" styleClass="showTooltip" value="Click me!" />

在您的 css 文件中添加以下规则：

.ui-state-disabled.showTooltip{
    pointer-events: all;
}

如果一个元素同时具有 ui-state-disabled 和 showTooltip 类，则无论如何都会显示工具提示。

【讨论】：

【解决方案2】：

如果您找不到在禁用按钮上显示工具提示的方法，您可以随时尝试用一些包装它

<h:panelGroup></h:panelGroup> 会变成span

或与

<h:panelGroup layout="block"></h:panelGroup> 会变成div

并尝试将工具提示应用于包装器...

【讨论】：

【解决方案3】：

我想扩展Daniel's 答案。您需要在禁用按钮上插入覆盖块并在其上应用工具提示。 h:panelGroup 中的简单包装按钮不会有太大帮助。

<h:panelGroup styleClass="display: inline-block; position: relative;">
    <p:commandButton disabled="#{controller.isDisabled()}" ... />
    <h:panelGroup styleClass="display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;"
                  rendered="#{controller.isDisabled()}"
                  id="disabledBtnOverlay" />
</h:panelGroup>
<p:tooltip for="disabledBtnOverlay" rendered="#{controller.isDisabled()}" />

【讨论】：

【解决方案4】：

一种使禁用按钮或输入文本显示工具提示的方法是创建一个全局工具提示，并在输入文本或按钮中添加一个标题，如下所示：

<p:tooltip />

<p:inputText id="inputTextID" disabled="true" value="Your value"
title="TooltipMessage" />

虽然它不会显示任何样式，但不知道为什么

【讨论】：