Tooltip - MudBlazor

API

<MudTooltip>

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.

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 error has occurred. This application may no longer respond until reloaded. Reload 🗙