Can I show tooltip for a disabled command button in primefaces?

Question

Is there a feature that displayable tooltip for disabled commandButton in primefaces.

Answer 1

In this question explains @Kukeltje why tooltips do not work on a disabled commandButton: PrimeFaces 6.2 commandButton title not working when commandbutton is disabled

The class .ui-state.disabled is added to the button if its disabled attribute is set to true:

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

In order to display the tooltip anyways you could create something like this:

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

In your css file add the following rule:

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

If an element has both classes ui-state-disabled and showTooltip the tooltip will be displayed anyways.

Answer 2

If you wont find a way to show tooltip on the disabled button you can always try wrap it with some

<h:panelGroup></h:panelGroup> which will turn into span

or with

<h:panelGroup layout="block"></h:panelGroup> which will turn into div

And try to apply the tooltip to the wrapper...

Answer 3

I would like to extend Daniel's answer. You need to insert overlay block over disabled button and apply tooltip on it. Simple wrapping button in h:panelGroup won't be so helpful.

<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

A way to make a disabled button or inputtext to show a tooltip is creating a global tooltip and in the inputtext or button a title, like this:

<p:tooltip />

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

Though it won't show any styles, dunno why