Skip to main content

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?

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 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!

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?

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


Reply


Terms & Conditions