Popover

A popover is a popular pattern where a dialog with additional details is displayed when an element is hovered.

import { Popover, usePopover } from '@citizensadvice/react-dialogs';

export function Example() {
  const { anchorProps, popoverProps } = usePopover();

  return (
    <>
      <a href="http://www.example.com" {...anchorProps}>
        Link
      </a>
      <Popover title="Popover title" {...popoverProps}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </Popover>
    </>
  );
}