Skip to main content
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.

​
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.

​
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]",
  "title?": "string",
  "description?": "string",
  "side?": "top | right | bottom | left",
  "cssClass?": "string"
}
For the complete protocol schema, see Popover.