Tooltip

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>
Arrow Tooltips

The tooltip can display arrows pointing to its activator, set the Arrow property to true to show them.

<MudTooltip Text="Arrow Left" Arrow="true" Placement="Placement.Left">
    <MudButton>Arrow Left</MudButton>
</MudTooltip>
<MudTooltip Text="Arrow Top" Arrow="true" Placement="Placement.Top">
    <MudButton>Arrow Top</MudButton>
</MudTooltip>
<MudTooltip Text="Arrow Bottom" Arrow="true" Placement="Placement.Bottom">
    <MudButton>Arrow Bottom</MudButton>
</MudTooltip>
<MudTooltip Text="Arrow Right" Arrow="true" Placement="Placement.Right">
    <MudButton>Arrow Right</MudButton>
</MudTooltip>
Colored Tooltips

Tooltips can be displayed in different colors with the Color property.

<MudTooltip Text="Secondary" Color="Color.Secondary" Placement="Placement.Top">
    <MudButton>Secondary</MudButton>
</MudTooltip>
<MudTooltip Text="Tertiary" Color="Color.Tertiary" Placement="Placement.Bottom" Arrow="true">
    <MudButton>Tertiary</MudButton>
</MudTooltip>
<MudTooltip Text="Primary" Color="Color.Primary" Placement="Placement.Top">
    <MudButton>Primary</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>
Transitions

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

<MudTooltip Delay="600" Text="Delayed: 600">
    <MudButton Color="Color.Primary">Delayed</MudButton>
</MudTooltip>
<MudTooltip Duration="1000" Text="Duration: 1000">
    <MudButton Color="Color.Primary">Duration</MudButton>
</MudTooltip>
<MudTooltip Duration="0" Text="Duration: 0">
    <MudButton Color="Color.Primary">Zero duration</MudButton>
</MudTooltip>
An unhandled error has occurred. Reload 🗙