Help

The Community will be temporarily unavailable starting on Friday February 28. We’ll be back as soon as we can! To learn more, check out our Announcements blog post.

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

Topic Labels: Custom Extensions
Solved
Jump to Solution
3451 4
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