Popover

An anchored panel that floats beside its trigger, built on Base UI's popover primitive.

Import

import { Popover } from '@oztix/roadie-components/popover'

Examples

Default

A trigger opens a positioned panel. Popover.Content collapses the underlying Portal, Positioner, and Popup into a single element, and Popover.Arrow renders a pointer connecting the panel to its trigger.

<Popover>
  <Popover.Trigger render={<Button>Open popover</Button>} />
  <Popover.Content>
    <Popover.Arrow />
    <Popover.Header>
      <Popover.Title>Notifications</Popover.Title>
      <Popover.Description>You have no new notifications.</Popover.Description>
    </Popover.Header>
  </Popover.Content>
</Popover>
View code

Intents

Portaled popups sit outside the trigger's CSS cascade, so set the colour context directly on Popover.Content with the intent prop. Each intent fits a different message — info for inline help, success for confirmation, warning and danger for caution and destructive actions, and accent to highlight something new.

function IntentExamples() {
  const [copied, setCopied] = useState(false)

  function copyLink(open) {
    setCopied(open)
    if (open) {
      navigator.clipboard?.writeText('https://oztix.com.au/event/123')
      setTimeout(() => setCopied(false), 2000)
    }
  }

  return (
    <div className='flex flex-wrap items-start gap-3'>
      {/* Info — inline help next to a field */}
      <Popover>
        <Popover.Trigger render={<IconButton aria-label='About API keys' emphasis='subtle' size='sm'><Info weight='bold' /></IconButton>} />
        <Popover.Content intent='info' positionerProps={{ side: 'right' }}>
          <Popover.Arrow />
          <Popover.Body>
            <p className='text-sm'>Your API key authenticates requests. Keep it secret — anyone with it can act on your behalf.</p>
          </Popover.Body>
        </Popover.Content>
      </Popover>

      {/* Success — copy a link, confirm, then auto-dismiss after 2s */}
      <Popover open={copied} onOpenChange={copyLink}>
        <Popover.Trigger render={<IconButton aria-label='Copy link'>{copied ? <Check weight='bold' /> : <LinkSimple weight='bold' />}</IconButton>} />
        <Popover.Content intent='success' positionerProps={{ side: 'top' }}>
          <Popover.Arrow />
          <Popover.Body>
            <p className='text-sm'>Link copied to your clipboard.</p>
          </Popover.Body>
        </Popover.Content>
      </Popover>

      {/* Warning — caution before leaving */}
      <Popover>
        <Popover.Trigger render={<Button>Leave page</Button>} />
        <Popover.Content intent='warning'>
          <Popover.Arrow />
          <Popover.Header>
            <Popover.Title>Unsaved changes</Popover.Title>
            <Popover.Description>Your edits will be lost if you leave now.</Popover.Description>
          </Popover.Header>
          <Popover.Footer>
            <Popover.Close render={<Button size='sm'>Stay</Button>} />
            <Popover.Close render={<Button intent='warning' emphasis='strong' size='sm'>Leave</Button>} />
          </Popover.Footer>
        </Popover.Content>
      </Popover>

      {/* Danger — destructive confirm on an icon button */}
      <Popover>
        <Popover.Trigger render={<IconButton aria-label='Delete file' intent='danger'><Trash weight='bold' /></IconButton>} />
        <Popover.Content intent='danger'>
          <Popover.Arrow />
          <Popover.Header>
            <Popover.Title>Delete file?</Popover.Title>
            <Popover.Description>This cannot be undone.</Popover.Description>
          </Popover.Header>
          <Popover.Footer>
            <Popover.Close render={<Button size='sm'>Cancel</Button>} />
            <Popover.Close render={<Button intent='danger' emphasis='strong' size='sm'>Delete</Button>} />
          </Popover.Footer>
        </Popover.Content>
      </Popover>

      {/* Accent — highlight a new feature */}
      <Popover>
        <Popover.Trigger render={<Button intent='accent' emphasis='strong'>What's new</Button>} />
        <Popover.Content intent='accent'>
          <Popover.Arrow />
          <Popover.Header>
            <Popover.Title>Saved views</Popover.Title>
            <Popover.Description>Pin your favourite filters and switch between them in one click.</Popover.Description>
          </Popover.Header>
          <Popover.Footer>
            <Popover.Close render={<Button size='sm'>Not now</Button>} />
            <Button intent='accent' emphasis='strong' size='sm'>Create a view</Button>
          </Popover.Footer>
        </Popover.Content>
      </Popover>
    </div>
  )
}

render(<IntentExamples />)
View code

Position

A popover opens below its trigger by default and re-flips to stay in view. Set positionerProps on Popover.Content to control placement — side (top/right/bottom/left), align (start/center/end), and sideOffset.

<div className='flex flex-wrap gap-3'>
  <Popover>
    <Popover.Trigger render={<Button>Filters</Button>} />
    <Popover.Content positionerProps={{ side: 'bottom', align: 'start' }}>
      <Popover.Arrow />
      <Popover.Body>
        <p className='text-sm'>Refine results by date, venue, and status.</p>
      </Popover.Body>
    </Popover.Content>
  </Popover>
  <Popover>
    <Popover.Trigger render={<IconButton aria-label='Help' emphasis='subtle' size='sm'><Info weight='bold' /></IconButton>} />
    <Popover.Content positionerProps={{ side: 'right' }}>
      <Popover.Arrow />
      <Popover.Body>
        <p className='text-sm'>We use this to send order confirmations.</p>
      </Popover.Body>
    </Popover.Content>
  </Popover>
  <Popover>
    <Popover.Trigger render={<Button>Add reaction</Button>} />
    <Popover.Content positionerProps={{ side: 'top' }}>
      <Popover.Arrow />
      <Popover.Body>
        <p className='text-sm'>Pick an emoji to react.</p>
      </Popover.Body>
    </Popover.Content>
  </Popover>
</div>
View code

Hover

Set openOnHover on Popover.Trigger (with an optional delay) so the panel opens on hover as well as click — ideal for previews and inline help. It still opens on focus and click, so keyboard users aren't locked out.

<Popover>
  <Popover.Trigger openOnHover delay={150} render={<Button>@jordan</Button>} />
  <Popover.Content positionerProps={{ side: 'top' }}>
    <Popover.Arrow />
    <Popover.Header>
      <Popover.Title>Jordan Lee</Popover.Title>
      <Popover.Description>Product designer · joined 2023</Popover.Description>
    </Popover.Header>
  </Popover.Content>
</Popover>
View code

Composition

Popover is a compound component. Use Popover.Header, Popover.Body, and Popover.Footer to structure the panel, and Popover.Close to dismiss it.

<Popover>
  <Popover.Trigger render={<Button>Account</Button>} />
  <Popover.Content>
    <Popover.Arrow />
    <Popover.Header>
      <Popover.Title>Signed in</Popover.Title>
      <Popover.Description>you@example.com</Popover.Description>
    </Popover.Header>
    <Popover.Body>
      <p className='text-sm text-subtle'>Manage your profile and settings.</p>
    </Popover.Body>
    <Popover.Footer>
      <Popover.Close render={<Button size='sm'>Cancel</Button>} />
      <Button intent='accent' emphasis='strong' size='sm'>Manage account</Button>
    </Popover.Footer>
  </Popover.Content>
</Popover>
View code

With footer actions

A Popover.Footer holds a centered actions row — ideal for a lightweight confirm-deletion flow anchored to the trigger.

<Popover>
  <Popover.Trigger render={<Button intent='danger' emphasis='strong'>Delete item</Button>} />
  <Popover.Content intent='danger'>
    <Popover.Arrow />
    <Popover.Header>
      <Popover.Title>Delete item?</Popover.Title>
      <Popover.Description>This action cannot be undone.</Popover.Description>
    </Popover.Header>
    <Popover.Footer>
      <Popover.Close render={<Button size='sm'>Cancel</Button>} />
      <Popover.Close render={<Button intent='danger' emphasis='strong' size='sm'>Delete</Button>} />
    </Popover.Footer>
  </Popover.Content>
</Popover>
View code

Guidelines

Use a popover for contextual content anchored to a control — menus, quick forms, and confirmations. It has no size prop, sizing to its content and anchor, and you set intent on Popover.Content, not the trigger, since portaled popups do not inherit the trigger's CSS cascade.

Accessibility

• Keyboard: Enter or Space on the trigger opens the popover; Escape closes it and returns focus to the trigger.
• Default action: while the popover is open, Enter activates the strong primary action (the emphasis='strong' button), like a form's default submit. It is ignored while focus is on another button, a multi-line textarea, or editable content.
• Focus: Focus moves into the popup when opened and is restored to the trigger on close.
• ARIA: The trigger and popup are wired together via Base UI, and Popover.Title/Popover.Description are announced as the accessible name and description.
• Icon-only close: When the dismiss control shows only an icon, give it an explicit label — e.g. <Popover.Close render={<IconButton aria-label='Close'><XIcon weight='bold' /></IconButton>} /> — so screen readers announce its purpose.