React Admin buttons don't trigger tooltips

[michel-paiva]

What you were expecting:
When I wrap a React Admin custom button with a Tooltip, (for example CreateButton) I expect the Tooltip to be shown when I hover over it.

What happened instead:

The tooltip is not shown when hovering over a custom button wrapped by a Tooltip.

Steps to reproduce:

Related code:

Check the example where in the postListActions I have a CreateButton wrapped by a Tooltip and a material-ui here

Other information:

This wasn't introduced now, it seems like an existing issue.
On material-ui doc they have this section talking about custom child components

Environment

• React-admin version: 5.2

[fzaninotto]

Thanks for the report. The problem comes from react-admin's <Button> and its derivatives (like <CreateButton>), which don't use forwardRef.

A PR to fix this is welcome.

[VikashChoudhary001]

Hi! The bug label was removed recently, so I wanted to confirm if this issue is still open for work or if it has already been resolved.

[fzaninotto]

The issue is still open, but it's categorized as an enhancement instead of a bug. We'll welcome any PR providing an implementation.

[VikashChoudhary001]

Hi @fzaninotto ,

It seems that the issue is caused by the fact that custom buttons like CreateButton do not natively trigger the mouseenter and mouseleave events required by the Tooltip component. To fix this, you can simply wrap the CreateButton inside a div to ensure the tooltip triggers on hover.

Here’s an example of how to fix it:

<Tooltip title="Create Post" >
  <div>
    <CreateButton />
  </div>
</Tooltip>

Let me know if you need further clarification!