AI Popover

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

Overview

Resources

Figma

Install


yarn add @camp/ai-popover

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>
  );
}

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