Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Tooltip

See Tooltip API for parameter documentation.

Simple Tooltips

Delete
Add
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 double in milliseconds.

Delete
Add
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 Placement enum you can change the default position of the tooltip.

Start/Left
Top
Bottom
End/Right
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 TooltipContent render fragment, you can specify custom HTML content for your tooltip.

h6 title

body2 content

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙