Tooltip - MudBlazor

Simple Tooltips

<MudTooltip Text="Delete">
    <MudIconButton Icon="@Icons.Material.Filled.Delete" />
</MudTooltip>
<MudTooltip Text="Add">
    <MudFab Icon="@Icons.Material.Filled.Add" Color="Color.Secondary" />
</MudTooltip>

Change Default Delay

The tooltip's default delay can be set with Delay as a double in milliseconds.

<MudTooltip Text="Delete" Delay="1000">
    <MudIconButton Icon="@Icons.Material.Filled.Delete" />
</MudTooltip>
<MudTooltip Text="Add" Delay="1000">
    <MudFab Icon="@Icons.Material.Filled.Add" Color="Color.Secondary" />
</MudTooltip>

Postioned Tooltips

With the Placement enum, you can change the default position of the tooltip.

<MudTooltip Text="Start/Left" Placement="Placement.Start">
    <MudButton>Start/Left</MudButton>
</MudTooltip>
<MudTooltip Text="Top" Placement="Placement.Top">
    <MudButton>Top</MudButton>
</MudTooltip>
<MudTooltip Text="Bottom" Placement="Placement.Bottom">
    <MudButton>Bottom</MudButton>
</MudTooltip>
<MudTooltip Text="End/Right" Placement="Placement.End">
    <MudButton>End/Right</MudButton>
</MudTooltip>

HTML Tooltips

With the TooltipContent render fragment, you can specify custom HTML content for your tooltip.

<MudTooltip>
    <ChildContent>
        <MudIconButton Icon="@Icons.Material.Filled.Delete" />
    </ChildContent>
    <TooltipContent>
        <MudText Typo="Typo.h6">h6 title</MudText>
        <MudText Typo="Typo.body2">body2 content</MudText>
        <MudIcon Icon="@Icons.Material.Filled.Star" />
    </TooltipContent>
</MudTooltip>