
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 28, 2020 05:58 PM
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?
Solved! Go to Solution.
Accepted Solutions

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jul 01, 2020 05:35 AM
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

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 30, 2020 02:25 PM
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>
);

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 30, 2020 06:40 PM
Thanks @Kasra that should work out totally fine, I appreciate it!

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jul 01, 2020 12:42 AM
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?

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jul 01, 2020 05:35 AM
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
