Popover

Overview

Use Popover for contextual content that appears near a trigger.

Popovers are good for lightweight forms, explanations, filters, small pickers, and secondary controls. Use Dialog when the task needs focus trapping or a larger workflow.

Anatomy

A popover has a trigger, popup, optional title or description, content, and optional close action.

Behavior

Keep popover content short and directly related to the trigger. Avoid putting complex multi-step workflows inside a popover.

Accessibility

The trigger should clearly describe what opens. Make sure focus behavior is predictable and that users can dismiss the popover with keyboard controls.

Installation

npm

npx love-ui@latest add popover

Usage

import {
  Popover,
  PopoverClose,
  PopoverDescription,
  PopoverPopup,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverPopup>
    <PopoverTitle>Popover Title</PopoverTitle>
    <PopoverDescription>Popover Description</PopoverDescription>
    <PopoverClose>Close</PopoverClose>
  </PopoverPopup>
</Popover>

Examples

The example shows a popover with an explicit close action.