Help

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

Solved
Jump to Solution
2698 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Shaun_Van_Weeld
6 - Interface Innovator
6 - Interface Innovator

Hey all,

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

Looking at this Tooltip Example here:

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?

1 Solution

Accepted Solutions

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

See Solution in Thread

4 Replies 4

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>
);

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

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?

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