PrimeFaces 6.2禁用commandButton时title属性失效问题求助

DevOps 小满

2026-5-27

PrimeFaces 6.2禁用按钮Title不显示问题的解决方案

我之前也碰到过PrimeFaces 6.2这个坑！你遇到的情况是PrimeFaces 6.2的一个已知问题——它对禁用状态的按钮新增了一个.ui-button-disabled-overlay覆盖层，这个层会完全挡住按钮本身的鼠标事件，导致原生的title属性没法触发显示，而PrimeFaces 6.1里还没有这个覆盖层，所以之前是正常的。

快速临时修复

最简单的解决办法是加一段自定义CSS，把覆盖层的鼠标事件禁用掉：

.ui-button.ui-state-disabled .ui-button-disabled-overlay {
    pointer-events: none;
}

这段代码会让鼠标事件直接穿透覆盖层作用到按钮上，原生title就能正常显示了，启用状态的按钮也不会受影响。

用PrimeFaces Tooltip的替代方案

如果你想用p:tooltip而不是原生title，记得配合上面的CSS，同时确保tooltip正确绑定到按钮ID（另外你的原始代码里ontroller少了个字母c，下面的代码已经修正了这个拼写错误）：

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

没有覆盖层挡着之后，tooltip就能正常捕获到鼠标悬停事件了。