dotUI

Popover

A popover displays content in a floating container that appears above other content.

Overview

Examples

<Dialog>
  <Button aria-label="Help">
    <InfoIcon />
  </Button>
  <Popover>
    <DialogContent className="w-56 space-y-4">
      <DialogHeading>Need help?</DialogHeading>
      <p>
        If you&apos;re having issues accessing your account, contact our
        customer support team for help.
      </p>
    </DialogContent>
  </Popover>
</Dialog>

Installation

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/popover

Usage

Use popovers to display rich content in a floating container that appears above other content.

import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeading } from "@/components/ui/dialog";
import { Popover } from "@/components/ui/popover";

<Dialog>
  <Button>Open Popover</Button>
  <Popover>
    <DialogContent>
      <DialogHeading>Popover Title</DialogHeading>
      <p>Popover content</p>
    </DialogContent>
  </Popover>
</Dialog>

Playground

Use the controls below to experiment with different popover props and see the live preview and code update.

placement

<Dynamic(Dialog)>
  <Dynamic(Button)>Open Popover</Dynamic(Button)>
  <Dynamic(Popover) placement="bottom">
    <Dynamic(DialogContent) className="w-56">
      <Dynamic(DialogHeading)>Popover Title</Dynamic(DialogHeading)>
      <p className="text-fg-muted text-sm">
        This is a popover with some content. You can put any content here.
      </p>
    </Dynamic(DialogContent)>
  </Dynamic(Popover)>
</Dynamic(Dialog)>

API Reference

A popover is an overlay element positioned relative to a trigger.

Prop	Type	Default
	`boolean`	`false`
	`string`	`—`
	`RefObject<Element \| null>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`Element`	`document.body`
	`Placement`	`'bottom'`
	`Element`	`document.body`
	`RefObject<Element \| null>`	`—`
	`RefObject<Element \| null>`	`overlayRef`
	`boolean`	`true`
	`number`	`—`
	`number`	`0`
	`boolean`	`—`
	`boolean`	`false`
	`((element: Element) => boolean)`	`—`
	`ReactNode \| function`	`—`

dotUI

Popover

Installation

Usage

Playground

placement

API Reference

On this page

On this page

dotUI

Product

Community

Support