Tooltip doesn't work on disabled button

[SrBrahma]

What package has an issue

@mantine/core

Describe the bug

I want a tooltip only when the Button is disabled.

To my surprise, the tooltip only works when the button is enabled. Googling I found this https://github.com/reach/reach-ui/issues/231#issuecomment-541182111.

I managed to get it working by wrapping the button with

<Group
  style={{
    // Show tooltip when hovering disabled button
    pointerEvents: saveButtonDisabled ? 'auto' : 'none',
    // Make cursor as clickable when not disabled
    cursor: saveButtonDisabled ? 'default' : 'pointer',
  }}
>

It works but it's very ugly and hard to explain. Is there a better way to do it?

What version of @mantine/hooks page do you have in package.json?

^5.3.0

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[rtivital]

If you want to add tooltip to disabled button, use data-disabled prop instead – https://codesandbox.io/s/optimistic-bash-liu0gr?file=/src/App.tsx Disabled elements do not support hover events in React, more info – https://github.com/floating-ui/floating-ui/discussions/1865

[SrBrahma]

As I only want the tooltip to show when disabled, I managed to get your solution working with this

<Tooltip
  label='X'
  events={{ hover: saveButtonDisabled, focus: false, touch: false }}
>
<Button
  {...(saveButtonDisabled ? { 'data-disabled': true } : undefined)}
  sx={{'&[data-disabled]': { pointerEvents: 'all' }}}
>

However as disabled isn't used, submit is still called on button click as it's type='submit'.

Edit: Fixed the situation by having a onClick={saveButtonDisabled ? (e) => e.preventDefault() : undefined}. Although I am not sure this is the best solution.

[PointSingularity]

@SrBrahma One simple workaround for this is to just wrap your button in another element if that is possible:

<Tooltip label="x">
  <span>
    <Button disabled={true}>Y</Button>
  </span>
</Tooltip>;

[Spoutnik97]

@SrBrahma another simple solution is to only use the disabled props with the sx style :

<Tooltip
  label='X'
>
<Button
  disabled={saveButtonDisabled}
  sx={{'&[data-disabled]': { pointerEvents: 'all' }}}
>