我可以在 primefaces 中顯示禁用命令按鈕的工具提示嗎？

Question

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

Answer 1

如果您找不到在禁用按鈕上顯示工具提示的方法，您可以隨時嘗試用一些包裹它

<h:panelGroup></h:panelGroup>將變成span

或與

<h:panelGroup layout="block"></h:panelGroup>將變成div

並嘗試將工具提示應用於包裝器...

Answer 2

在這個問題中解釋了@Kukeltje 為什么工具提示在禁用的 commandButton 上不起作用： PrimeFaces 6.2 commandButton title not working when commandbutton is disabled

如果其 disabled 屬性設置為 true，則類.ui-state.disabled將添加到按鈕中：

.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 ，則無論如何都會顯示工具提示。

Answer 3

我想擴展丹尼爾的回答。 您需要在禁用的按鈕上插入覆蓋塊並在其上應用工具提示。 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()}" />

Answer 4

使禁用按鈕或輸入文本顯示工具提示的一種方法是創建全局工具提示並在輸入文本或按鈕中創建標題，如下所示：

<p:tooltip />

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

雖然它不會顯示任何樣式，但不知道為什么