Popover

The built-in popover tag — a click-toggled floating panel anchored to a trigger button, with a full Markdown body. Usage, options, and live examples.

A floating panel that toggles open when you click its trigger. target is the trigger button’s label; the block body is the panel content and is ordinary Markdown — headings, lists, links, even nested tags. The panel toggles on click after the page hydrates; pass opened to force it open for docs and screenshots.

Use it as {% popover %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'popover', …).

Demonstrations

Basic

target is the button label; everything between the tags is the dropdown body. Click the button to toggle it.

Width, arrow, and trigger variant

width='target' makes the panel exactly as wide as its trigger; withArrow points at the button; targetVariant restyles the trigger; and arrowSize, offset, and radius tune the rest of the look.

Focus and click-outside behavior

trapFocus keeps keyboard focus inside the panel (useful when it holds a form), and closeOnClickOutside=false keeps the panel open when you click away.

Force it open

opened=true renders the dropdown open so you can see (and screenshot) its contents without clicking:

With other components

The Markdown body can host other tags. Here the panel holds a Badge and a Text note, pinned open so you can see them:

Popover vs. HoverCard vs. Menu

• Popover — a Markdown panel, on click (this tag).
• HoverCard — a Markdown card, on hover.
• Menu — a list of actions and links, on click.

Attributes

Omit any attribute to take its Mantine default. The dropdown body is the block body (or, from Python, children).

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="Popover"], or through the Mantine Styles API classes. The dropdown mounts into a portal and its parts exist only while the popover is shown. The relevant classes:

/* Every rendered Popover carries this island marker */
[data-aardvark-island="Popover"] { }

/* Mantine Styles API classes */
.mantine-Popover-dropdown { }
.mantine-Popover-arrow { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — onto the rendered dropdown. Click Account to open the popover, then click inside it: the injected onclick reads the dropdown’s text and alerts it.