Overlays

AppPopover

A click-opened floating panel anchored to a trigger — a notifications list, a filters panel, a rich mini-menu.

<app-popover title="Notifications"><app-popover-trigger>…</app-popover-trigger><app-popover-body>…</app-popover-body></app-popover>

<app-popover> is a positioned overlay anchored to a trigger you supply — click it and a panel opens beside it, no backdrop, no page takeover. It sits apart from the library's other overlays: AppModal centers over a backdrop for a form or a focused task, AppDropdown is a flat list of actions, and AppInfoTip is a hover “?” for a one-line explanation. Reach for AppPopover when the content is richer than a menu but doesn't need to take over the screen.

Its look comes entirely from the shared @webority/theme, so the Razor <app-popover> and the React <AppPopover> render identically — same panel, same arrow, same placement behaviour on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the panel above it.

title body placement trigger-type class

<app-popover title="Notifications">
    <app-popover-trigger><app-button variant="secondary" size="sm">Open</app-button></app-popover-trigger>
    <app-popover-body>Panel body content.</app-popover-body>
</app-popover>

Menu open motion product-wide via data-wui-menu-motion — pick one, then open the menus below

A panel anchored to a trigger

Compose the anchor with <app-popover-trigger> and the panel body with <app-popover-body>. The panel opens beside the trigger and closes on an outside click or Escape.

A notifications panel

Show code

<app-popover title="Notifications">
    <app-popover-trigger><app-button variant="ghost" left-icon="bell">Notifications</app-button></app-popover-trigger>
    <app-popover-body>
        <div class="d-flex flex-column gap-2">
            <div>Priya approved <strong>Site survey #48</strong>.</div>
            <div>New comment on “Risk assessment”.</div>
        </div>
    </app-popover-body>
</app-popover>

The trigger is yours<app-popover-trigger> renders its content exactly as written — a button, an <app-button>, an <app-action-icon>. <app-popover> only wires the Bootstrap popover trigger attributes around it.

Title or body-only

title sets the panel heading. Omit it and the panel is just the body — no header rule, no wasted space for content that explains itself.

A filters panel, body only

Show code

<app-popover>
    <app-popover-trigger><app-action-icon icon="filter" label="Filters"></app-action-icon></app-popover-trigger>
    <app-popover-body>
        <label><input type="checkbox" checked /> Open</label>
        <label><input type="checkbox" /> Archived</label>
    </app-popover-body>
</app-popover>

Placement

placement controls which side the panel opens on. auto picks the side with room and flips to stay in view.

Every placement

Click each trigger to see where its panel opens.

Show code

<app-popover placement="top" title="Top">…</app-popover>
<app-popover placement="bottom" title="Bottom">…</app-popover>
<app-popover placement="start" title="Start">…</app-popover>
<app-popover placement="end" title="End">…</app-popover>
<app-popover placement="auto" title="Auto">…</app-popover>

What opens it

trigger-type decides what opens the panel — click (the default), hover, or focus. A click-opened panel closes on an outside click; hover/focus close when the pointer or focus leaves.

click, hover, focus

Show code

<app-popover trigger-type="click" title="Click">…</app-popover>
<app-popover trigger-type="hover" title="Hover">…</app-popover>
<app-popover trigger-type="focus" title="Focus">…</app-popover>

The outside-click close only applies to clickA click-triggered panel closes itself on an outside click or Escape. A hover/focus panel has no “outside click” to catch — it closes when the pointer leaves or focus moves on.

When to use

Use it when

A trigger needs a floating panel of content richer than a flat action list — a notifications feed, a filters form, a mini preview.
The content is contextual to the trigger and doesn't need a backdrop or to interrupt the page.
You want the panel positioned and flipped to stay in view automatically.

Reach for something else when

The content is a flat list of actions. → AppDropdown
The task needs full attention — a form, a multi-step flow, a destructive confirmation. → AppModal
You are explaining a single term next to a label. → AppInfoTip

Best practices

A short, scannable panel — a few lines the user can read without scrolling.

Don't

A multi-field form crammed into a popover has nowhere to show validation and no backdrop to hold focus — use AppModal instead.

Every option

The whole surface of the component, one cell per value.

placement — all five

placement="top"

placement="bottom"

placement="start"

placement="end"

placement="auto"

trigger-type — every value

trigger-type="click" (default)

trigger-type="focus"

trigger-type="hover focus" — Bootstrap's space-separated multi-trigger syntax

trigger-type="hover" alone is accepted but not recommendedBootstrap forwards a bare hover value as-is — but a hover-only trigger is invisible to keyboard and touch users, so this page doesn't render one on its own. Always pair it with focus: trigger-type="hover focus", shown above.

title — with and without

title="Notifications" — header rendered

(no title) — body-only panel

special combinations

class="notif-pop" — class lands on the panel host

long content — panel grows, no truncation

trigger is app-action-icon — any markup works as the anchor

React↔Razor difference — onToggleReact's onToggle callback has no Razor counterpart: Bootstrap's popover fires DOM events (shown.bs.popover / hidden.bs.popover) instead of a server-side callback, since the tag helper renders once on the server. A page that needs to react to open/close in Razor listens to those events in its own script.

Attributes

Attribute	Type	Default	Description
app-popover-trigger *	`markup`	—	Child slot — the anchor element the panel opens from (React `trigger`).
app-popover-body *	`markup`	—	Child slot — the panel body (React `children`).
title	`string`	—	Optional panel heading. Omit it for a body-only panel.
placement	`top \| bottom \| start \| end \| auto`	`bottom`	Where the panel opens; `auto` flips it to stay in view.
trigger-type	`click \| hover \| focus`, or a Bootstrap space-separated combination (e.g. `hover focus`)	`click`	What opens the panel. React accepts an array (`['hover', 'focus']`); Razor reaches the same outcome with a space-separated string, since it forwards straight to Bootstrap's `data-bs-trigger`.
class	`string`	—	Extra classes on the panel host span (React `className`).
onToggle	—	—	React-only. Razor listens to Bootstrap's `shown.bs.popover` / `hidden.bs.popover` DOM events instead.

Playground

A panel anchored to a trigger

Title or body-only

Placement

What opens it

When to use

Use it when

Reach for something else when

Best practices

Every option

placement — all five

trigger-type — every value

title — with and without

special combinations

Attributes

Related