Popover displays rich content in a non-modal overlay anchored to a trigger element — an optional title, a close button, and arbitrary children content.
Material Design 3 doesn't publish a standalone "Popover" component page, so there is no M3
Spec link on this page the way other docs pages have one. Popover is this library's own general-purpose
anchored-overlay primitive built on bits-ui's Popover.Root.
It sits between a few M3 concepts without being a 1:1 match to any of them: closer to the
non-modal "rich tooltip"/dialog surfaces described under Dialogs than to a true modal Dialog (it doesn't block interaction with the rest of the page and has
no scrim), but it's also not a hover-triggered Tooltip (this library
ships that separately under Forms) — it's click-triggered and can hold interactive content.
Reach for Popover for click-triggered supplementary info or
a small set of controls anchored to a button; reach for Menu instead when the content is a list of selectable actions, and for Dialogue when the interaction should block the rest of the page
until resolved.
import { Popover } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Open the Popover story, plus an Icon Trigger, No Title variant.
<script lang="ts">
import { Popover, Button, Body } from '@noxlovette/material';
</script>
<Popover title="Storage">
{#snippet trigger()}
<Button variant="outlined">Show info</Button>
{/snippet}
<Body>75% of your storage has been used.</Body>
</Popover> | Prop | Type | Default | Description |
|---|---|---|---|
trigger required | Snippet | — | The trigger element, typically a Button or ButtonIcon. |
children required | Snippet | — | The popover panel content. |
title | string | — | Optional heading displayed at the top of the panel. |
showClose | boolean | true | Shows a close (×) button inside the panel header. |
open | boolean | false | Controlled open state. Bindable. |
side | "top" | "right" | "bottom" | "left" | 'bottom' | Positioning side relative to the trigger (bits-ui Popover.ContentProps). |
align | "start" | "center" | "end" | 'start' | Alignment along the side axis. |
sideOffset | number | 8 | Gap between trigger and panel, in pixels. |
class | string | — | Additional CSS classes for the panel. |
Keyboard dismissal
Escape closes the popover and returns focus to the trigger, handled by bits-ui Popover primitives.
Non-modal
Unlike Dialogue, the rest of the page remains interactive and focusable while a Popover is open — do not use it for content that must block further interaction.