Callout

Overview

A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.

Usage

Callout

<div style="height:200px;"></div>
<div style="display:inline;overflow-x:auto;">
    <div style="width:300px"></div>
    <DefaultButton Text="Show Callout" OnClick=ClickHandler @ref="calloutTarget" />
    <div style="width:300px"></div>
</div>
<div style="height:400px;"></div>
@if (!calloutHidden)
{
    <Callout FabricComponentTarget=@calloutTarget
             DirectionalHint=@((DirectionalHint)Enum.Parse(typeof(DirectionalHint),selectedOption?.Key!))
             OnDismiss=@DismissHandler>
        <div Style="max-width:300px; padding:20px;">
            <h2>Callout Test</h2>
            <p style="min-width: 150px;">
There are a few things in here.
            </p>
            <PrimaryButton Text="Ok" />
        </div>
    </Callout>
}