TooltipRenderer: Fix useLayoutEffect warnings during SSR
TooltipRenderer: Re-evaluate position when trigger or children changes
Fixes an issue where the tooltip would not re-evaluate its position when the trigger or children prop changed while the tooltip was already open.
TooltipRenderer: Fix arrow overlapping tooltip corner radius
Fix for an edge case where the arrow on a small tooltip could the overlap the corner radius of the tooltip.
TooltipRenderer: Remove custom background
Use the correct semantic token for the background of tooltips. While there is no visual change, this is just a clean up to ensure the palette usage remains consistent.
TooltipRenderer: Refine padding to complement radius scale
Removes the custom padding on tooltips in favour of using the space scale. Previously, a custom value was used to complement the over sized radius which has now be reduced.
Improve consistency of border radius usage across components
Over time, individual components have reached for a larger radius in the scale, rather than increasing the scale at a theme level. This resulted in inconsistent use across the system, preventing uplift of the scale.
Re-aligning all components to use the scale consistently enables themes to apply very different radius scales — enabling an upcoming design uplift theme.
TooltipRenderer: Ignore pointer events on tip container
Fix for the container of the tooltip interferring with pointer events of the tooltip trigger itself.
Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale
TooltipRenderer: Support usage within Text elements
TooltipRenderer: Add arrow to tooltip
TooltipRenderer: Add placement prop, support top and bottom. Set default placement to top.
EXAMPLE USAGE
<TooltipRenderer id={id} tooltip={<Text>This is a tooltip!</Text>} placement="bottom" > {({ triggerProps }) => ( <Box aria-label="Help" {...triggerProps}> <IconHelp /> </Box> )} </TooltipRenderer>
Add TooltipRenderer component
Tooltips appear on mouse hover, tap and keyboard focus, and are hidden when scrolling and clicking/tapping/focusing on other elements.
Tooltips cannot contain interactive elements like links, buttons or form elements.
Note: The trigger element must support ref, tabIndex and aria-describedby props.
EXAMPLE USAGE
<TooltipRenderer id={id} tooltip={ <Text> This is a tooltip! </Text> } > {({ triggerProps }) => ( <Box aria-label="Help" {...triggerProps}> <IconHelp /> </Box> )} </TooltipRenderer>