Popover

A floating panel that opens next to the element that triggered it.

1<template>2  <Popover>3    <Button variant="outline">Open</Button>4    <template #content>5      <div class="p-3">Content</div>6    </template>7  </Popover>8</template>

Props

Name	Type	Default
mode	"click" \| "hover"	"click"
open	boolean	-
content	{ side?, align?, sideOffset?, ... }	{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }
title	string	-
description	string	-
...props	UPopover props (defaultOpen, arrow, portal, reference, dismissible, openDelay, closeDelay, enableTouch, ...)	-

Slots

Name	Description
default	The trigger element, scoped with `open`.
content	Full escape hatch for the popover panel's content, scoped with `close`. Overrides `title`/`description` entirely when provided.

Guidelines

Do

Use for content anchored to a trigger that the user shouldn't lose their place to reach - a filter's date picker, a table cell's full breakdown behind a truncated value, a small settings panel.
Use mode="hover" (with open-delay/close-delay) when the content is supplemental detail someone glances at without clicking anything - e.g. a table cell's full value list.
Reach for Dialog instead when the content needs the user's full, undivided attention (a form, a confirmation, a payment flow) - Popover is deliberately non-modal, the rest of the page stays interactive.

Use the built-in title/description shell for a plain, single-message panel (a short explanation with a close button, nothing interactive inside). Drop to the #content slot the moment you need anything else - presets, form fields, a list - none of that fits the fixed-width title+description shape.

Don't

Don't put a primary action's only path inside a hover-triggered Popover - anything keyboard-only or touch-only may never trigger a hover state.
Don't use it for a single line of plain text - that's Tooltip. Popover is for real content: lists, controls, multi-line panels.
Don't mix title/description with #content - #content always wins and silently ignores both props, so a caller that sets all three will find title/description doing nothing.