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.

Toggletip and its sub-components

Anatomy of the Popover component
Element	Purpose
Close action	Close action is built into the component and does not need to be added and cannot be removed.
Content	Content 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
Name	Type	Default	Description
children Required	`ReactNode`		The content of the Toggletip
onClose	`func`		Callback 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-end`	top	Popper.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();