Popovers are small overlays that open on demand and provide additional information and actions.

Overview

Resources

Install

yarn add @activecampaign/camp-components-popover

Variations

Popovers are used within many other Camp components, including tooltip and dropdown. Popovers are triggered by clicking an element. Elements that trigger popovers are most often form elements such as a dropdown or an input, but can also be triggered from buttons or icons. The user can select an item within the popover menu, or click outside of the popover menu to dismiss the popover.

Default popover

import Popover from '@activecampaign/camp-components-popover';
import Button from '@activecampaign/camp-components-button';
 
export default function () {
  const [hasPopover, setHasPopover] = useState(false);
 
  return (
    <Popover.Anchor onDismiss={() => setHasPopover(false)}>
      <Button onClick={() => setHasPopover(true)}>Toggle Popover</Button>
      {hasPopover && <Popover placement="bottom">🍿</Popover>}
    </Popover.Anchor>
  );
}

Autofocus example

By default, the popover will automatically place focus on the first interactive element inside of the dialog that opens (you can set the autoFocusPopover prop to false to disable this feature). See this in action in the example below where the “Toggle Popover” dialog has interactive elements inside of it.

Accessibility

Keyboard support

• Move focus to the popover using tab
• When popover trigger (such as a button) is in focus, use space or enter to open the popover
• Interactive elements (such as a link or button) within a popover integrate into the tab order by default, set theautoFocusPopover prop to false to disable this feature