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>