TooltipRenderer: Add support for left and right placement, in addition to existing top and bottom.
EXAMPLE USAGE:
<TooltipRenderer placement="left" ...props > ... </TooltipRenderer>
ButtonIcon, TooltipRenderer: Close tooltips after clicking the trigger on desktop devices
Autosuggest, MenuRenderer, OverflowMenu, TooltipRenderer: Ensure TooltipRenderer is correctly positioned on Android devices
Additionally, adjust TooltipRenderer positioning at screen edges, removing extra edge spacing.
This ensures the tooltip arrow is more closely aligned with the trigger when the trigger is near the edge of the screen.
TooltipRenderer: Ensure Chinese text is not wrapped incorrectly
Right aligned tooltip triggers with tooltips containing long unbroken Chinese text are no longer forcibly broken across many lines.
This was due to the use of overflow-wrap: break-word; used to break long strings of Latin characters—guarding against broken layouts.
For Chinese, Japanese and Korean (CJK) character sets, to avoid the unwanted line breaks it is recommened to apply the word-break: keep-all; CSS property.
See MDN reference for more information.
Autosuggest, MenuRenderer, TooltipRenderer: Improve placement logic
In MenuRenderer, if there is not enough space for the menu above or below the trigger, the menu will be positioned based on the placement prop.
TooltipRenderer: Optimise performance by reducing unnecessary recalculations of the trigger position
ButtonIcon, TooltipRenderer: Remove unnecessary intermediary element around the tooltip trigger.
TooltipRenderer: Improve tooltip positioning at viewport edges.
Subtly adjusts tooltip edge padding and minimum arrow margins when triggered near window boundaries to ensure optimal arrow placement.
Autosuggest, MenuRenderer, OverflowMenu, TooltipRenderer: Refactor the internal layout of floating elements for improved consistency.
Change id prop from required to optional, allowing simplified usage.
Remove the uuid dependency which was previously used to generate fallback IDs in Playroom.
EXAMPLE USAGE:
- <AccordionItem id="item-1" ... /> + <AccordionItem ... />
TooltipRenderer: Support long, unbroken text content
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>