Popover - MudBlazor

Note: When using this component it can be good to have some CSS knowledge it might not serve all types of content out of the box.

Simple Popover

The popover's open state is completely up to you, as well as the content of it.

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">Open</MudButton>
<MudSwitch @bind-Checked="@_isOpen" Color="Color.Primary" />
<MudToggleIconButton @bind-Toggled="@_isOpen" Icon="@Icons.Filled.Fullscreen" Color="@Color.Primary" ToggledIcon="@Icons.Filled.FullscreenExit" ToggledColor="@Color.Secondary" />

<MudPopover Open="@_isOpen" Class="px-4 pt-4">
    <div class="d-flex flex-column">
        <MudText>Content of the popover can be anything.</MudText>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
    </div>
</MudPopover>

@code{
    public bool _isOpen;

    public void ToggleOpen()
    {
        if (_isOpen)
            _isOpen = false;
        else
            _isOpen = true;
    }
}

Direction and Location

Note: the location can be set with custom css or using the style tag.

Control where the popover should start from relative to the parent. Offset the popover to be located outside of the parent.

Offset X

Left Right

Offset Y

Top Bottom

<MudGrid>
    <MudItem xs="12" md="2">
        <MudSwitch @bind-Checked="@OffsetX" Label="Offset X" Color="Color.Primary" />
        <MudRadioGroup @bind-SelectedOption="@Direction">
            <MudRadio Color="Color.Primary" Option="@(Direction.Left)" Disabled="!OffsetX">Left</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Direction.Right)" Disabled="!OffsetX">Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="8">
        <MudPaper Elevation="0" Outlined="true" Class="ma-auto" Style="width:100px; height:100px;">
            <MudPopover Open="true" OffsetX="@OffsetX" OffsetY="@OffsetY" Direction="@Direction" Class="pa-4" Style="width:170px; position:relative;">
                <MudText>Popover Content</MudText>
            </MudPopover>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="2">
        <MudSwitch @bind-Checked="@OffsetY" Label="Offset Y" Color="Color.Secondary" />
        <MudRadioGroup @bind-SelectedOption="@Direction">
            <MudRadio Color="Color.Secondary" Option="@(Direction.Top)" Disabled="!OffsetY">Top</MudRadio>
            <MudRadio Color="Color.Secondary" Option="@(Direction.Bottom)"  Disabled="!OffsetY">Bottom</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

@code{
    public bool OffsetX { get; set; } = false;
    public bool OffsetY { get; set; } = true;
    public Direction Direction { get; set; } = Direction.Left;
}