This is the callout content.

NoOverlay

The page keeps its own clicks.

DefaultIsOpen

Open from the start.

Disabled

Never shown.

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

``` ```csharp private ElementReference anchorEl; private BitCallout callout1; private BitCallout callout2; ``` \n**Binding**: ```razor Show callout Anchor

Close it from inside.

Done Cancel

IsOpen: @isOpen

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

Opened on hover.

Delayed (500ms)

Opening and closing both waited half a second.

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

Rename Duplicate Delete

NoDismissOnScroll

Scroll the page: this one follows its anchor.

No auto dismiss

Neither Escape nor an outside click closes this one.

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

Right-click anywhere in here

Cut Copy Paste

Last action: @contextAction

``` ```csharp private BitCallout contextCallout; private string contextAction = "none"; ``` \n**Placement**: ```razor A wide anchor to place against

Placed by the options above.

Direction: All

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

Callout content @i

}

CollisionPadding of 24px

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

Callout content @i

}

Reposition

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

Callout content @i

} Add a row

``` ```csharp private string placementSide = "Auto"; private BitPlacement placementAlignment = BitPlacement.Start; private int placementGap = 8; private int placementOffset; private bool placementNoFlip; private BitPlacement? PlacementSide => Enum.TryParse(placementSide, out var side) ? side : null; 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**Surface**: ```razor Background

A secondary background.

Border

A primary border.

NoShadow

No elevation, only a border.

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

Points at its anchor.

Beside, with a border

The beak takes the border too.

ArrowSize of 20px

A bigger beak.

ArrowPadding of 64px

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

``` \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 & MinWidth

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

Callout content @i

}

A wide anchor with SetCalloutWidth

Short content.

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

Filters

Top sheet

Swipe up to dismiss it.

Bottom sheet

Swipe down to dismiss it.

``` \n**Focus & modal**: ```razor AutoFocus

Dismiss

TrapFocus

Contact

Submit

Modal

Role & AriaLabel

Everything is up to date.

``` ```csharp private BitCallout modalCallout; ``` \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

Rendered up front

``` ```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**Cascading parameters**: ```razor Cascaded

Arrow, gap, border and side come from the cascade.

Cascaded too

The same defaults.

Own Placement, no arrow

Its own values win.

Outside the cascade

No defaults here.

``` ```csharp private readonly BitCalloutParams[] calloutParams = [ new() { ShowArrow = true, Gap = 8, Placement = BitPlacement.End, Border = BitColorKind.Secondary, NoShadow = true, } ]; ``` \n**Style & Class**: ```razor Inverted A dark surface, rounder corners and a bigger beak. Outlined

Outlined

A border instead of elevation; the padding goes inside the header, the body and the footer. 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

}

```