Dottiv1.1
← Components

Popover

Component

Floating content overlay positioned relative to a trigger element.

Installation & Usage

Basic Usage
import { Popover } from 'dotti'

<Popover content={<div>Popover content</div>}>
  <Button>Trigger</Button>
</Popover>

Examples

Basic Popover

Simple popover with content positioned around a trigger.

Code
<Popover content={<div className="p-3">This is a popover!</div>}>
  <Button>Hover me</Button>
</Popover>

<Popover content={<div className="p-3">Click popover</div>} trigger="click">
  <Button>Click me</Button>
</Popover>

Popover Positions

Different placement options for the popover.

Code
<Popover content={<div>Top popover</div>} placement="top">
  <Button>Top</Button>
</Popover>

<Popover content={<div>Bottom popover</div>} placement="bottom">
  <Button>Bottom</Button>
</Popover>

Rich Content

Popover with complex content including actions.

Code
<Popover 
  content={
    <Card padding="md">
      <Stack spacing="md">
        <div>
          <h3>User Profile</h3>
          <p>John Doe</p>
        </div>
        <Stack direction="row" spacing="sm">
          <Button size="sm">View</Button>
          <Button size="sm" variant="ghost">Edit</Button>
        </Stack>
      </Stack>
    </Card>
  }
>
  <Button>Profile Info</Button>
</Popover>

Props