Skip to content

Toggletip

Toggletip is a simplified version of Popover meant to provide additional context about its target element, e.g. “more information” about a term or “details” about a calculation.
Figma logo
Anatomy of a Toggletip: content in the body of the element with a close action in the upper-right corner
Toggletip and its sub-components
Anatomy of the Popover component
ElementPurpose
Close actionClose action is built into the component and does not need to be added and cannot be removed.
ContentContent can contain text or other components and is intended to be minimal. Reference Popover for additional guidance.
  • Note the usage of useToggletip, which returns required properties for the opening button element and the Toggletip itself
  • Add an aria-label to the Toggletip element to help screen reader users decide whether or not they want to interact with the element
React props
NameTypeDefaultDescription
children  RequiredReactNodeThe content of the Toggletip
onClose  funcCallback triggered when closing the Toggletip. Applies to clicking the close action, clicking the backdrop, and pressing the escape key.
placement  autoauto-startauto-endtoptop-starttop-endbottombottom-startbottom-endrightright-startright-endleftleft-startleft-endtopPopper.js placement option. For more information see the Popper.js docs

Toggletip was built with accessibility in mind.

  • Toggletip content will be read allowed when opened
  • Toggletips are positioned relative to their “reference” (opening) element to maintain a visual connection between the elements
  • A Toggletip must be self-sufficient and not rely on context outside of itself
    • Screen readers will not have access to content outside of itself
    • The Toggletip will be positioned above other content, which will present a challenge for sighted users

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

const SampleScenario = () => {
const [toggletipProps, toggletipButtonProps] = useToggletip();
return (
<>
<IconButton {...toggletipButtonProps} title="More information">
<CircleInfo />
</IconButton>
<Toggletip {...toggletipProps} aria-label="More information">
<p>Very important information</p>
</Toggletip>
</>
);
};
render(<SampleScenario />);
const iconButton = screen.getByRole('button', {
name: 'More information',
});
const toggletip = screen.getByLabelText('More information');
expect(toggletip).not.toBeVisible();
userEvent.click(iconButton);
expect(toggletip).toBeVisible();
expect(toggletip).toHaveAccessibleDescription('Very important information');
const closeButton = screen.getByRole('button', {
name: 'Close',
});
userEvent.click(closeButton);
expect(toggletip).not.toBeVisible();