Feedback

TwPopover

TwPopover is a Blazor popover component: a button that opens a floating panel of rich content, placed on any side and kept on screen.

Last updated 23 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Give TwPopover a Label for its button and put the panel's content inside it. The panel opens below the button, moves focus into itself, and closes on Escape, on a click outside it, or when focus leaves it.

RAZOR

<TwPopover Label="Share">
    <p class="mb-3">Anyone with the link can view this page.</p>
    <TwTextfield T="string" Label="Link" Value="@("https://twblazor.com/popover")" ReadOnly />
</TwPopover>

Title and close button

Set Title to give the panel a heading, which also names it for screen readers. Set ShowCloseButton to add a close button in its top corner, which helps on touch screens.

RAZOR

<TwPopover Label="Dimensions" Icon="Icon.Arrows_Angle_Expand" Title="Dimensions" ShowCloseButton>
    <div class="grid grid-cols-2 gap-3">
        <TwNumeric T="int" Label="Width" Value="1280" />
        <TwNumeric T="int" Label="Height" Value="720" />
    </div>
</TwPopover>

Placement and alignment

Set Placement to open the panel on another side of the button, and Align to line it up with the button's start, centre or end (Start by default). When there isn't room on the chosen side, the panel flips to the opposite one. Start and End follow the reading direction, so they swap in a right to left layout.

RAZOR

<div class="flex flex-wrap gap-3">
    <TwPopover Label="Top" Placement="PopoverPlacement.Top" Align="PopoverAlign.Center" AutoFocus="false">Opens above.</TwPopover>
    <TwPopover Label="Bottom" Placement="PopoverPlacement.Bottom" Align="PopoverAlign.Center" AutoFocus="false">Opens below.</TwPopover>
    <TwPopover Label="Start" Placement="PopoverPlacement.Start" Align="PopoverAlign.Center" AutoFocus="false">Opens before the button.</TwPopover>
    <TwPopover Label="End" Placement="PopoverPlacement.End" Align="PopoverAlign.Center" AutoFocus="false">Opens after the button.</TwPopover>
</div>

Icon button

Set IconOnly to show just the Icon. Give it an AriaLabel, which names the button and shows as its tooltip.

RAZOR

<TwPopover Icon="Icon.Info_Circle" IconOnly AriaLabel="About billing" Title="About billing" AutoFocus="false">
    <p>You are billed on the first day of each month. Changes to your plan apply from the next bill.</p>
</TwPopover>

Your own trigger

Use TriggerContent to open the panel from an element of your own. Splat context.Attributes onto it, which ties it to the panel for assistive technology, and call context.ToggleAsync when it is clicked. Use a button, so it can be reached and pressed from the keyboard.

RAZOR

<TwPopover Title="John Doe" Align="PopoverAlign.Start">
    <TriggerContent>
        <button type="button" class="rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600" @attributes="context.Attributes" @onclick="context.ToggleAsync">
            <TwAvatar Initials="JD" Name="John Doe" />
        </button>
    </TriggerContent>
    <ChildContent>
        <p class="mb-3">Signed in as john&#64;example.com</p>
        <TwButton Label="Sign out" Color="Color.Accent" Variant="ButtonVariant.Outlined" Dense />
    </ChildContent>
</TwPopover>

Opening from code

Bind Open with @bind-Open to open and close the panel from code, or call OpenAsync, CloseAsync and ToggleAsync on a reference to it.

Filters are closed.

RAZOR

<div class="flex flex-wrap items-center gap-3">
    <TwPopover Label="Filters" Icon="Icon.Funnel" Title="Filters" @bind-Open="filtersOpen">
        <div class="flex flex-col gap-3">
            <TwSwitch T="bool" Label="In stock only" @bind-Value="inStockOnly" />
            <TwSwitch T="bool" Label="On sale" @bind-Value="onSale" />
            <TwButton Label="Apply" Dense OnClick="@(() => filtersOpen = false)" />
        </div>
    </TwPopover>
    <span role="status" class="text-sm">Filters are @(filtersOpen ? "open" : "closed").</span>
</div>

CSHARP

@code {
    private bool filtersOpen;
    private bool inStockOnly = true;
    private bool onSale;
}

Accessibility

The button reports aria-haspopup="dialog", whether the panel is open, and which panel it controls. The panel is a non-modal dialog named by its Title, or by the button when there is no title. Opening it moves focus inside, onto an element marked data-tw-autofocus, its first control, or the panel itself. Escape closes it and returns focus to the button. Tabbing out or clicking elsewhere closes it and leaves focus where you moved it. For panels that only show text, set AutoFocus="false": the text then follows the button in the Tab and reading order.

The button tells screen readers that it opens a dialog and whether it is open. The panel is a non-modal dialog named by its title, or else by the button.

Key	What it does
`Tab`	Moves focus to the popover's button.
`Enter` or `Space`	On the button: opens the panel and moves focus into it, or closes it.
`Tab` or `Shift` plus `Tab`	Moves between the controls in the panel. Tabbing out of the panel closes it.
`Escape`	Closes the panel and returns focus to the button.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwPopoverTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Background`	string
`Border`	string
`Rounded`	Rounded?
`Shadow`	Shadow?
`TimeRangeSize`	string
`ColorSize`	string
`Root`	string
`Panel`	string
`Title`	string
`CloseButton`	string

Full reference: TwPopoverTheme on the API docs.

TwPopover

Basic usage

Title and close button

Placement and alignment

Icon button

Your own trigger

Opening from code

Accessibility

Keyboard navigation

Theme configuration