A Popover opens on press and holds content people interact with: fields, toggles, short lists of actions. It stays nonmodal by default, so the rest of the page remains usable, and closes on Escape, an outside press or its close action. For read-only supplementary content, use Tooltip or Preview Card instead.
Title and description
The title and description slots name and describe the popup for assistive technology. Without a title, label supplies the accessible name.
Title and Description are optional when the popup has an adequate accessible name and description. Explicitly label controls inside interactive content using real Field/Input components. Native form ownership remains with those controls.
Title and description
Default density
Compact density
Restart from the initial state
Show the copyable source
NotificationsNotificationsChoose what reaches your inbox.
Mentions and repliesWeekly project digestProduct announcements
NotificationsNotificationsChoose what reaches your inbox.
Mentions and repliesWeekly project digestProduct announcements
<tp-popover label="Notifications">
<tp-button slot="trigger" variant="outline">Notifications</tp-button>
<span slot="title">Notifications</span>
<span slot="description">Choose what reaches your inbox.</span>
<div style="display:grid;gap:var(--tp-space-3)">
<tp-checkbox default-checked>Mentions and replies</tp-checkbox>
<tp-checkbox default-checked>Weekly project digest</tp-checkbox>
<tp-checkbox>Product announcements</tp-checkbox>
</div>
</tp-popover>
Placement
placement takes a side and an alignment. The default is block-end center; logical sides follow the writing direction, and the popup flips when it would collide with the viewport edge. show-arrow points the popup at its trigger.
The default placement is block-end center: below the anchor in horizontal writing, to its left in vertical-rl, and to its right in vertical-lr. Use bottom center for an explicitly physical bottom placement.
Placement and arrow
Default density
Compact density
Restart from the initial state
Show the copyable source
Below, startFilter by statusOpenClosedBeside, with arrow
Below, startFilter by statusOpenClosedBeside, with arrow
modal contains focus inside the popup and makes the rest of the page inert while it is open. Use it when the popup holds a task that should finish before anything else happens.
Modal
Default density
Compact density
Restart from the initial state
Show the copyable source
Invite teammatesInvite teammatesThey'll get an email with a link to join.Send invite
Invite teammatesInvite teammatesThey'll get an email with a link to join.Send invite
<tp-popover label="Invite teammates" modal>
<tp-button slot="trigger">Invite teammates</tp-button>
<span slot="title">Invite teammates</span>
<span slot="description">They'll get an email with a link to join.</span>
<tp-field label="Email">
<tp-input type="email" placeholder="name@company.com"></tp-input>
</tp-field>
<tp-button slot="close">Send invite</tp-button>
</tp-popover>
Hover
open-on-hover also opens the popup after open-delay milliseconds of hover. Focus alone does not open it, and a press pins a hover-opened popup so it stays open.
Open on hover
Default density
Compact density
Restart from the initial state
Show the copyable source
Synced 2 min agoAll changes savedLast synced from MacBook Pro at 14:32.Sync now
Synced 2 min agoAll changes savedLast synced from MacBook Pro at 14:32.Sync now
<tp-popover label="Sync status" open-on-hover open-delay="200">
<tp-button slot="trigger" variant="ghost">Synced 2 min ago</tp-button>
<span slot="title">All changes saved</span>
<span slot="description">Last synced from MacBook Pro at 14:32.</span>
<tp-button slot="close" variant="outline" size="sm">Sync now</tp-button>
</tp-popover>
Anchor
The anchor slot positions the popup against a different element than the one that opens it. The Trigger still owns activation; the anchor only supplies geometry.
Without a Trigger, the owner opens the Popover: it sets open, places the popup with anchor (property only: an element or a virtual anchor, such as the rectangles of a text selection), and sets open back to false when tp-open-change proposes closing. Without anchor, the popup sits at the element in the anchor slot, else at the Trigger.
Separate anchor
Default density
Compact density
Restart from the initial state
Show the copyable source
Reschedule
Ship onboarding checklistDue Oct 14
Reschedule taskThe popup aligns with the task row, not the button.Save
Reschedule
Ship onboarding checklistDue Oct 14
Reschedule taskThe popup aligns with the task row, not the button.Save
<tp-popover label="Reschedule task" placement="block-end start" style="display:grid;justify-items:start;gap:var(--tp-space-3)">
<tp-button slot="trigger" variant="outline" size="sm">Reschedule</tp-button>
<div slot="anchor" style="display:flex;justify-content:space-between;gap:var(--tp-space-6);padding:var(--tp-space-3) var(--tp-space-4);border:var(--tp-border-width) solid var(--tp-border);border-radius:var(--tp-radius-lg);font-size:var(--tp-text-sm)">
<span>Ship onboarding checklist</span>
<span style="color:var(--tp-muted-foreground)">Due Oct 14</span>
</div>
<span slot="title">Reschedule task</span>
<span slot="description">The popup aligns with the task row, not the button.</span>
<tp-field label="New due date">
<tp-input type="date" default-value="2026-10-21"></tp-input>
</tp-field>
<tp-button slot="close">Save</tp-button>
</tp-popover>
Controlled
Listen to tp-open-change to react to opening and closing, or set open yourself. The event is cancelable, so an owner can veto a close while work is pending.
Open change
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionpreserve-on-trigger-hoverpreserveOnTriggerHoverbooleanfalseKeeps a hover-opened popup open while the pointer moves back to the trigger, as long as focus is inside the popup.
Events
EventTypeDescriptiontp-open-changeTpSurfaceOpenChangeEventCancelable proposal to open or close, before the surface changes; detail.value is the proposed state, detail.reason what asked (a trigger press, hover or focus, Escape, an outside press, a close action or code) and detail.trigger the trigger. On a close, detail.preventUnmountOnClose() keeps the content mounted.tp-open-change-completeCustomEvent<{ open: boolean; }>After the surface finishes opening or closing; detail.open.
Slots
SlotDescriptiondefaultThe content of the popup.triggerThe control that opens the popup, usually a Button.anchorAn element to position the popup against instead of the trigger.titleThe heading that names the popup.descriptionText that describes the popup.headerReplaces the header that holds the title and the description.closeAn action that closes the popup when pressed, after its own handlers.
CSS parts
PartDescription::part(popover)The host around the trigger and the popup.
Related
Components, widgets and patterns that use this one.