Skip to main content
Solved

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

S

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?

Best answer by Amr

Kamille_Parks11 wrote:

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
View original
    Did this topic help you find an answer to your question?

    4 replies

    K
    • Kasra
    • Inspiring
    • 192 replies
    • June 30, 2020

    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>
);
    S
    Kasra wrote:

    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!

    Kamille_Parks11
    Forum|alt.badge.img+15
    Kasra wrote:

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

    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?

    A
    • Amr
    • New Participant
    • 2 replies
    • Answer
    • July 1, 2020
    Kamille_Parks11 wrote:

    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
    S
    Kamille_Parks11
    2 people like this
    • S
      Shaun_Van_Weeld
    • Kamille_Parks11
      Kamille_Parks11

    Reply


    Most helpful members this week

    Terms & Conditions