Tooltip: Tooltip not showing when p-button is disabled

[AlexisDefranoux]

Describe the bug

Tooltip not showing when p-button is disabled.

Environment

Primeng 16.4.1
Angular 16.2.0

Reproducer

https://stackblitz.com/edit/ejvvqt?file=src%2Fapp%2Fdemo%2Ftooltip-basic-demo.html

Angular version

16.2.0

PrimeNG version

16.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.1

Browser(s)

Chrome 117

Steps to reproduce the behavior

1. Hover on the disabled button
2. The tooltip isn't showing

Expected behavior

the tooltip appears when hovering over the disabled button.

[cetincakiroglu]

Tooltip shouldn't be triggered when the button is disabled, this is not a bug. It's how it should be since the disabled button cannot receive any events. It's by design and it should stay as it is. Closing the issue since there is not a bug, enhancement or feature request.

[Adrii77]

As a workaround, you can add pointer-events: auto on your button to show Prime tooltip.

[fsomme2s]

Hmm i often (actually: always) want to explain to the user, why a button is disabled.
So I'd argue that this would be a nice feature to have as "opt-in" .

Better not changing the default behaviour, but maybe like:

<button ... [disabled]="selection.length < 3" [pTooltip]="selection.length < 3 ? 'Select at least 3 items!' : ''" [pDoShowTheTooltipEvenIfDisabled]="true" .../>

maybe with a better name
or maybe

<button ... [disabled]="selection.length < 3" pDisabledTooltip="Select at least 3 items!" .../>

---

pointer-events: auto workaround works like a charm, thx!

so my [pDoShowTheTooltipEvenIfDisabled]="true" is basically written as: style="pointer-events: auto"

Side note: same behaviour for simple html "title" attribute, not only pTooltip

[mconner]

Tooltip shouldn't be triggered when the button is disabled, this is not a bug. It's how it should be since the disabled button cannot receive any events. It's by design and it should stay as it is. Closing the issue since there is not a bug, enhancement or feature request.

Providing a tooltip to the user and running the action when clicking the message are two different things, and it may be, as @fsomme2s indicated, that you want to explain why it is disabled. Providing at least an opt-in class or directive for any component that behaves this way would be appropriate. Seems to me, that should have been the default.

Thanks to @Adrii77 for the workaround.

[countlesscircles]

The workaround mentioned here technically works, but it also re-enables the click event for the disabled buttons... which was very undesirable behaviour.
In the end I worked around it by wrapping the button in another element and applying the [pTooltip] to the wrapper.

I'd argue that a button being disabled is probably the most likely time that you'd want to have a tooltip, as mentioned already...

[D-bana]

I agree with @fsomme2s and @mconner that having this as an opt-in feature could be really useful, as I encountered the same problem while trying to show my users WHY the button is disabled (and the same issue on the tieredMenu btw). Would really be appreciated if the team can re-think this decision since it would be very useful to show tooltips when buttons are disabled.

[Triskae]

As mentioned already, it would be nice to have this feature to explain why the button is disabled, at least an opt-in class...

[AkScriptHS]

I encountered the same issue, one of the most common uses of tooltips is to explain to users why the button is disabled, I think this issue should be reopened.

[Rlamotte]

Same opinion than each other comments below. Pushing information through tooltip when button is disabled is such a common feature. It's sad to see that's not rendered on primeNg buttons by design.
Please reopen this issue!

[sdwallace]

It is highly desirable to have the tooltip show when the button is disabled to indicate to the user why the button is disabled. We are pretty sure it worked this way in earlier versions as we just discovered it no longer does. Please reopen.

[autonomobil]

same

[abhijit-chikane]

Tooltip shouldn't be triggered when the button is disabled, this is not a bug. It's how it should be since the disabled button cannot receive any events. It's by design and it should stay as it is. Closing the issue since there is not a bug, enhancement or feature request.

how to notify user why the button is disabled then?

[staplKody]

throwing a div around the button with a tool tip is an easy way to get around this albeit very ugly to read.

[nick-allen]

Just stumbled on this issue looking for the same disabled button reason use case.

[staplKody]

I wouldn't expect to see it resolved anytime soon honestly. Considering this is expected according to the first comment.

[bigimattia]

Even if this is not a bug and is working as intended, you can implement the required behaviour by wrapping the button with a span (or a div as suggested in other comments) and by providing the tooltip directive there.

example:

<span pTooltip="displaying even if button is disabled"
                [tooltipDisabled]="!disableButton">
                <p-button [disabled]="disableButton" label="test"/>
  </span>

[mmirold]

I honestly think this is a conceptual flaw and you should reevaluate that behavior. It's one of the most infuriating things in UIs when they disable stuff without explaining why, and you are inviting this behavior by making it pretty difficult to do it right.