Bug Report: Tooltip doesn't render when Button is disabled

[Shaun_Van_Weeld]

Hey all,

I think this is a bug, or maybe my React knowledge isn’t up to snuff.

Looking at this Tooltip Example here:

Airtable

Airtable | Everyone's app platform

Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate, and achieve ambitious outcomes. Get started for free.

import { Tooltip, Button } from "@airtable/blocks/ui";
const tooltipExample = (
  <Tooltip
    content="Notifications"
    placementX={Tooltip.placements.CENTER}
    placementY={Tooltip.placements.BOTTOM}
    shouldHideTooltipOnClick={true}
  >
    <Button icon="bell" aria-label="Notifications" />
  </Tooltip>
);

When I add a “disabled={true}” property to the button in the above example, the tooltip no longer renders.

This is unfortunate because my main use-case for a tooltip was to indicate why a button was disabled.

Am I missing something? If it is a bug, do you think it can be fixed before next weekend, or should I code around it?

[Kasra]

Thanks for reporting this, we’ll look into it. In the meantime you can make the tooltip show up by wrapping the button in a div or a Box:

import { Tooltip, Button, Box } from "@airtable/blocks/ui";
const tooltipExample = (
  <Tooltip
    content="Notifications"
    placementX={Tooltip.placements.CENTER}
    placementY={Tooltip.placements.BOTTOM}
    shouldHideTooltipOnClick={true}
  >
    <Box>
      <Button icon="bell" aria-label="Notifications" />
    </Box>
  </Tooltip>
);

[Shaun_Van_Weeld]

Thanks @Kasra that should work out totally fine, I appreciate it!

[Kamille_Parks]

When using this workaround, my tooltips stay on screen unless the button is clicked (they never go away if shouldHideTooltipOnClick={false}). Is there a way to get Tooltips to display with disabled buttons, but only on rollover?

[Amr · Accepted solution]

Looking at the code Tooltip relies on onMouseEnter and onMouseLeave for the anchor in this case it’s a disabled button which will not fire onMouseEnter nor onMouseLeave. Wrapping it in a div or Box would only fire onMouseEnter but not onMouseLeave.

My workaround would be:

• Delete the disabled prop
• Stop the logic in onClick if button is considered disabled
• Conditionally change the style to make it transparent