AI Popover

AI Popover displays contextual AI-powered information or actions in a lightweight overlay anchored to a trigger element.

Overview

Resources

Changelog

Source code

Storybook

Figma

Install

yarn add @camp/ai-popover

Props

Prop	Type	Default	Description
`children` *	`ReactElement<any, string \| JSXElementConstructor<any>>`	—	Child element(s) that will trigger the popover.
`content` *	`FC<{}>`	—	Content to display inside the popover.
`noPadding`	`boolean`	`false`	Whether to remove padding from the popover.
`offset`	`number`	—	Whether to apply an offset to the popover (number of pixels).
`onClose`	`() => Promise<void>`	—	Custom callback when the popover is unmounted.
`onOpenChange`	`(open: boolean) => void`	—	Callback when controlled open state changes.
`open`	`boolean`	—	Controlled open state.
`placement`	`"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"`	`bottom`	Placement of the popover in relation to the reference element.
`themed`	`boolean`	`true`	Whether the component should adapt to the theme context. When false, forces light theme.

Generated from @camp/ai-popover@5.14.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Variations

Default

Use the AI Popover to surface immediate, contextual assistance without disrupting the user’s flow.

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover content="Hello">
  <button>Click me</button>
</AiPopover>;

Placement

Position the popover relative to its trigger when needed.

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover content="Hello" placement="bottom">
  <button>Click me</button>
</AiPopover>;

Remove padding

Remove padding from the popover content.

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover content="Hello" noPadding>
  <button>Click me</button>
</AiPopover>;

Offset

Apply an offset to the popover content from the trigger.

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover content="Hello" applyOffset>
  <button>Click me</button>
</AiPopover>;

Controlled

Manage open state externally when integrating with other app logic.

import * as React from 'react';
import { AiPopover } from '@camp/ai-popover';
 
function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <AiPopover
      open={open}
      onOpenChange={setOpen}
      content={<div style={{ padding: 12 }}>Some content here</div>}
    >
      <button onClick={() => setOpen((v) => !v)}>Toggle AI popover</button>
    </AiPopover>
  );
}

Production Examples

More states from @camp/ai-popover's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Padding Default

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover
  content={SimpleContent}
  open
>
  {<button>Default Padding</button>}
</AiPopover>

Padding None

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover
  content={SimpleContent}
  open
  noPadding
>
  {<button>No Padding</button>}
</AiPopover>

Placement Bottom

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover
  content={SimpleContent}
  open
>
  {<button>Bottom Placement</button>}
</AiPopover>

Placement Top

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover
  content={SimpleContent}
  placement="top"
  open
>
  {<button>Top Placement</button>}
</AiPopover>

Placement Left

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover
  content={SimpleContent}
  placement="left"
  open
>
  {<button>Left Placement</button>}
</AiPopover>

Placement Right

import { AiPopover } from '@camp/ai-popover';
 
<AiPopover
  content={SimpleContent}
  placement="right"
  open
>
  {<button>Right Placement</button>}
</AiPopover>

11 more variations in Storybook

Accessibility

Keyboard support

Tab: Moves focus to the trigger, then into the popover content when opened
Ensure all interactive elements inside the popover are reachable via Keyboard