> ## 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.
# Popover
> Floating content panel triggered by clicking a child element.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
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](/components/tooltip) and [HoverCard](/components/hover-card), 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
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Button,
Column,
Input,
Label,
Popover,
)
with Popover(title="Babel Fish Settings", description="Configure your universal translator."):
Button("Open popover", variant="outline")
with Column(gap=3):
Label("Source Language")
Input(placeholder="Vogon")
Label("Target Language")
Input(placeholder="Galactic Standard")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Popover",
"title": "Babel Fish Settings",
"description": "Configure your universal translator.",
"children": [
{
"type": "Button",
"label": "Open popover",
"variant": "outline",
"size": "default",
"disabled": false
},
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{"type": "Label", "text": "Source Language", "optional": false},
{
"name": "input_15",
"type": "Input",
"inputType": "text",
"placeholder": "Vogon",
"disabled": false,
"readOnly": false,
"required": false
},
{"type": "Label", "text": "Target Language", "optional": false},
{
"name": "input_16",
"type": "Input",
"inputType": "text",
"placeholder": "Galactic Standard",
"disabled": false,
"readOnly": false,
"required": false
}
]
}
]
}
}
```
## Without Header
Skip the `title` and `description` to render content directly in the panel.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Button,
Column,
Label,
Popover,
Slider,
)
with Popover():
Button("Settings", variant="outline")
with Column(gap=3):
Label("Improbability Factor")
Slider(min=0, max=100, value=42, name="improbability")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Popover",
"children": [
{
"type": "Button",
"label": "Settings",
"variant": "outline",
"size": "default",
"disabled": false
},
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{"type": "Label", "text": "Improbability Factor", "optional": false},
{
"name": "improbability",
"value": 42.0,
"type": "Slider",
"min": 0.0,
"max": 100.0,
"disabled": false,
"size": "default"
}
]
}
]
},
"state": {"improbability": 42.0}
}
```
## Positioning
Control which side the panel appears on with the `side` prop:
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button, Popover, Text
with Popover(title="Guide Entry", side="right"):
Button("Click 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button, Column, Popover, Text
from prefab_ui.actions import CloseOverlay
from prefab_ui.actions.mcp import CallTool
from prefab_ui.rx import Rx
item_id = Rx("item_id")
with Popover():
Button("Archive", variant="outline")
with Column(gap=2):
Text("Archive this item?")
Button(
"Confirm",
on_click=[
CallTool("archive_item", arguments={"id": item_id}),
CloseOverlay(),
],
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Popover",
"children": [
{
"type": "Button",
"label": "Archive",
"variant": "outline",
"size": "default",
"disabled": false
},
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{"content": "Archive this item?", "type": "Text"},
{
"type": "Button",
"label": "Confirm",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": [
{
"action": "toolCall",
"tool": "archive_item",
"arguments": {"id": "{{ item_id }}"}
},
{"action": "closeOverlay"}
]
}
]
}
]
}
}
```
## API Reference
Optional header title for the popover panel.
Optional description below the title.
Preferred side to show the popover: `"top"`, `"right"`, `"bottom"`, `"left"`.
Additional Tailwind CSS classes.
## Protocol Reference
```json Popover theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "Popover",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"title?": "string",
"description?": "string",
"side?": "top | right | bottom | left",
"cssClass?": "string"
}
```
For the complete protocol schema, see [Popover](/protocol/popover).