payloadcms/payload

`<Button>` does not show tooltip when disabled

Closed this issue · 2 comments

Describe the Bug

The <Button> element does not show tooltips when disabled. This is because when a Button is disabled, it does not trigger mouseenter / leave events, which Button uses to listen for tooltip enabling:

onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,

This can be fixed by changing to use onPointerEnter and onPointerLeave to listen to enter/exit events.

Ref: https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled

Link to the code that reproduces this issue

N/A

Reproduction Steps

Render this element: <Button disabled={true} tooltip="I will not show" />

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Node.js v22.10.0

Binaries:
Node: 22.10.0
npm: 10.9.0
Yarn: N/A
pnpm: 9.12.1
Relevant Packages:
payload: 3.0.0-beta.123
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:15 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10

🚀 This is included in version v3.0.0-beta.126

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.