ComponentsFeedback and overlays

Tooltip

Tooltips name or briefly explain a control on hover and keyboard focus. Use them for supplementary hints; never hide information a user needs to complete a task inside one.

Basic tooltips

Wrap the element in MudTooltip and set Text. Icon-only buttons still need their own aria-label; the tooltip is a visual hint.

The

of Vega is 18 h 37 m.

Placements

Placement puts the tooltip on any side. Start and End follow the reading direction. Turn on the switch to show all six at once.

Show all tooltips

Every placement and color, with arrows

All 54 combinations of Placement and Color, each with Arrow pointing at its target. Hover or focus a cell.

MudTooltip: Placement × Color, Arrow on
Placement ↓ · Color →	Default	Primary	Secondary	Tertiary	Info	Success	Warning	Error	Dark	Transparent	Inherit	Surface
Left
Right
End
Start
Top
Bottom

Activation, delay and duration

ShowOnHover, ShowOnFocus and ShowOnClick choose what opens the tooltip. Delay waits before showing; Duration sets the fade.

Open on

Hover

Keyboard focus

Click

Custom content

TooltipContent accepts markup when a sentence is not enough, such as a keyboard shortcut or a short summary.

Disabled elements and disabled tooltips

A disabled button cannot take focus, so keyboard users never see its tooltip: say why it is disabled in visible text as well. Disabled on the tooltip turns the hint off.

Booking opens 48 hours before the session.

Show labels on the toolbar

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

Text

Placement

Color

Delay (ms)

Arrow

Show on hover

Show on focus

Show on click

<MudTooltip Text="Next train in 4 minutes" Placement="Placement.Top" Arrow="true">
    <MudButton Variant="Variant.Outlined" Color="Color.Primary">Hover or focus me</MudButton>
</MudTooltip>