Geek Answers Handbook

Can I show a tooltip for a disabled command button on networks?

Is there a feature that displays a tooltip for a disabled commandButton in files.

+5
source share
4 answers

If you don’t find a way to show a tooltip on a disabled button, you can always try wrapping it with

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

or

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

And try applying a tooltip to the wrapper ...

+11
source

I would like to extend Daniel's answer . You need to insert the overlap button above the disabled button and apply a tooltip to it. A simple wrap button in h: panelGroup will not be so useful.

<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()}" />
+2
source

, , , :

<p:tooltip />

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

- ,

+1

@Kukeltje, commandButton: commandButton PrimeFaces 6.2 , command

.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, .

0

More articles:


All Articles