Popover

Popover is a click-triggered floating panel that supports interactive content such as forms, action lists, and date pickers. Unlike Tooltip, Popover can contain focusable elements.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Popover, Button } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Popover>
      <Popover.Button>
        <Button variant="outline">Open Popover</Button>
      </Popover.Button>
      <Popover.Panel>
        <p className="text-sm text-gray-700">Popover content goes here.</p>
      </Popover.Panel>
    </Popover>
  );
}

Props

Popover.Panel

When to use

• Popover — Use for click-triggered overlays that contain interactive content (forms, lists, date pickers). Popover traps focus and supports keyboard navigation.
• Tooltip — Use for hover-triggered text-only hints that supplement UI labels. Tooltip cannot contain interactive elements.
• Dialog — Use when the content requires full user attention and blocks the rest of the page.