PrimeFaces 6.2 commandButton title not working when commandbutton is disabled

Question

Environment: JSF 2.2.14, PrimeFaces 6.2

I have my command button set up as below, when the button is disabled, title will show up (when hovered over) in PF6.1, but won't show in PF6.2

<p:commandButton id="removeCmd" icon="fa fa-times" 
             actionListener="#{controller.remove()}" 
             update="@form"
             disabled="#{ontroller.isCommandDisabled()}"                                                          
             style="width: 20px; height:20px;margin-left: 5px;"
             title="#{controller.isCommandDisabled() ? 'Command disabled due to user privilege' : 'remove selected item'}"
             onstart="PF('bui').show(); PF('bar').show();" 
             oncomplete="PF('bui').hide(); PF('bar').hide();"
             styleClass="removeCmd"/>

Title show up fine when button is not disabled.

Does anyone encounter the same problem? I also tried to wrap my p:commandButton inside h:panelGrid and use p:tooltip with it, not working either.

UPDATE: issue created on github: https://github.com/primefaces/primefaces/issues/3656

Answer 1

By nature I'm curious (and I follow the changes in PrimeFaces a little). If the title of a button does not work anymore between 6.1 and 6.2 I start analyzing a little. The generated html for a button in both PrimeFaces versions is identical. This makes me think whether it would have stopped working for other components as well. So I created a simple page

<p:inputText title="myInput enabled" />
<p:inputText title="myInput disabled" disabled="true"/>

And the behaviour change between using PrimeFaces 6.1 and 6.2 was the same. Title working for both in 6.1 and only for the first in 6.2. Since there was a major jquery change between PrimeFaces 6.1 and 6.2, I posted 'jquery show title tooltip of disabled inputs and buttons' in google.

One of the hits was: Show tooltip for disabled items

In it there was a reference to some css(!) that disables dom events and consequently not showing titles.

pointer-events: none;

I opened my browser developer tool and in the filter part in the css tab, I put 'pointer'. When using 6.1, there was nothing there, but in 6.2 there was.

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

Which seems to be coming from the components.css file (according to my browser developer tool). This is not a file that exists in the PrimeFaces repository but one that is created when the PrimeFaces release is build via maven:

One of the files that is included here is the jquery-ui.css and in it is the piece of css referenced above.

When I disabled the corresponding pointer-events: none in my browser developer tool, the titles became visible both for the input and the button.

So if you want to override this, please set this to 'all' (or any other value of your liking).

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

See also

• How do I override default PrimeFaces CSS with custom styles?