Skip to main content

Documentation Index

Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt

Use this file to discover all available pages before exploring further.

Popovers display rich content in a floating panel when users click a trigger element. The first child becomes the trigger; all remaining children become the panel content. Unlike Tooltip and HoverCard, which appear on hover, Popovers require a click and stay open until the user clicks outside — making them ideal for forms, settings, and menus.

​
Basic Usage

​
Without Header

Skip the title and description to render content directly in the panel.

​
Positioning

Control which side the panel appears on with the side prop: 
from prefab_ui.components import Button, Popover, Text

with Popover(title="Guide Entry", side="right"):
    Button("Hover for info", variant="outline")
    Text("A towel is about the most massively useful thing an interstellar hitchhiker can have.")
The renderer auto-adjusts if the popover would overflow the viewport, so the side is a preference rather than a hard constraint.

​
Inline Confirmation

For lighter-weight confirmations that don’t need a full modal overlay, a Popover works well. The same trigger-then-content pattern applies.

​
API Reference

Popover Parameters

​
title
str | None
default:"None"
Optional header title for the popover panel.
​
description
str | None
default:"None"
Optional description below the title.
​
side
str | None
default:"None"
Preferred side to show the popover: "top", "right", "bottom", "left".
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Popover
{
  "type": "Popover",
  "children?": "[Component]",
  "let?": "object",
  "title?": "string",
  "description?": "string",
  "side?": "top | right | bottom | left",
  "cssClass?": "string"
}
For the complete protocol schema, see Popover.