This is the callout content.

NoOverlay

The page keeps its own clicks while this callout is open.

DefaultIsOpen

This callout owns its own open state.

``` \n**External anchor**: ```razor AnchorId

``` ```csharp private ElementReference anchorEl; private BitCallout callout1; private BitCallout callout2; ``` \n**Context menu**: ```razor

Right-click anywhere in here

Cut Copy Paste

Last action: @contextAction

``` ```csharp private BitCallout contextCallout; private string contextAction = "none"; ``` \n**Binding**: ```razor Show callout Anchor

This is the callout content.
You can even close it from here!

Done Cancel

``` ```csharp private bool isOpen; ``` \n**Open on hover**: ```razor Hover me

This callout opened on hover.

Delayed (500ms)

Both the opening and the closing waited half a second.

``` \n**Arrow**: ```razor With an arrow

This callout points at its anchor.

Arrow with a border

The beak takes the border of the callout too.

ArrowSize of 20px

A beak twice the size of the default one.

ArrowPadding of 64px

The beak is held 64px away from the corners of the callout.

``` \n**Positioning**: ```razor TopAndBottom

@for (int i = 1; i < 23; i++) {

Callout content @i

}

All

@for (int i = 1; i < 23; i++) {

Callout content @i

}

Side: Top

Placed above the anchor whenever there is room above it.

Side: End

Placed beside the anchor, on the side the content ends at.

Side: Top, NoFlip

@for (int i = 1; i < 13; i++) {

Callout content @i

}

A wide anchor, centered alignment

Centered on the anchor.

A wide anchor, end alignment

Lined up with the end edge.

Beside, centered

@for (int i = 1; i < 5; i++) {

Callout content @i

}

AlignmentOffset of 32px

Slid 32px in from the start edge of the anchor.

End alignment, offset of 32px

The same value, running in from the end edge instead.

Gap of 16px

This callout keeps 16px away from its anchor.

Reposition

@for (int i = 1; i <= repositionRows; i++) {

Callout content @i

} Add a row

CollisionPadding of 24px

@for (int i = 1; i < 25; i++) {

Callout content @i

}

``` ```csharp private BitCallout callout4 = default!; private int repositionRows = 2; private bool repositionAfterRender; private void AddRepositionRow() { repositionRows++; // The callout is laid out against what is actually in it, so the reposition waits for the render // that puts the new row there rather than measuring the content the callout still holds. repositionAfterRender = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); if (repositionAfterRender) { repositionAfterRender = false; await callout4.Reposition(); } } ``` \n**Sizing**: ```razor Width

A callout of a fixed width.

MaxWidth

A long line of text that wraps inside the callout instead of stretching it across the page.

MaxHeight

@for (int i = 1; i < 25; i++) {

Callout content @i

}

A wide anchor with SetCalloutWidth

Short content, anchor-wide callout.

A wide anchor with FixedCalloutWidth

A long line of text that wraps rather than making the callout wider than its anchor.

``` \n**Header & footer**: ```razor Header & Footer

A header that stays put

@for (int i = 1; i < 69; i++) {

Callout content @i

}

Wired up by hand

A header that stays put

@for (int i = 1; i < 69; i++) {

Callout content @i

}

``` \n**Responsive**: ```razor End panel

Filters

Start panel

...

Top sheet

...

Bottom sheet

...

``` \n**Surface**: ```razor Background

A secondary background.

Border

A primary border.

NoShadow

No elevation, only a border.

``` \n**Modal**: ```razor Modal

The page behind is dimmed.

Modal with TrapFocus

Submit

``` \n**Keyboard & focus**: ```razor AutoFocus

Submit

AutoFocus (data-autofocus)

Dismiss Submit

TrapFocus

Submit

Role & AriaLabel

Everything is up to date.

``` \n**Dismissal**: ```razor AutoClose (@autoCloseAction)

Rename Duplicate Delete

No auto dismiss

Neither Escape nor an outside click closes this one.

Close

``` ```csharp private BitCallout callout3; private string autoCloseAction = "none"; ``` \n**Nesting**: ```razor Filters

Filters More options

The panel behind is still open. One more level

And so is this one.

``` \n**Lazy rendering**: ```razor LazyRender

Pick a date

Rendered up front

Pick a date

``` ```csharp private DateTimeOffset? lazyDate; private DateTimeOffset? eagerDate; ``` \n**Events**: ```razor Show callout

This is the callout content.

Toggled: @toggleCount, Opened: @openCount, Dismissed: @dismissCount

``` ```csharp private int openCount; private int toggleCount; private int dismissCount; ``` \n**Style & Class**: ```razor Component's Style

This is the callout content.

Component's Class

This is the callout content.

Styles

This is the callout content.

Classes

This is the callout content.

``` \n**RTL**: ```razor نمایش کال‌اوت

این محتوای کال‌اوت است.

همه جهت‌ها

@for (int i = 1; i < 13; i++) {

محتوای کال‌اوت @i

}

```