Tooltip

Text on hover and keyboard focus.

JavaScript off: what the HTML and CSS do on their own.

Usage

razor

<Tooltip Text="Copy to clipboard">
    <IconButton Icon="Lucide.Copy" Label="Copy" />
</Tooltip>

@* Below the trigger, with a shortcut. *@
<Tooltip Placement="Placement.Bottom">
    <Content>Save <Kbd Keys="Ctrl+S" /></Content>
    <ChildContent><Button>Save</Button></ChildContent>
</Tooltip>

A tooltip is a short hint about a control, shown on hover and on keyboard focus: what an icon does, or its shortcut. For a panel people click to open, with links or a form, use a Popover.

Placement

Use Placement to show the tooltip below, before or after its trigger; it's above by default.

Preview Code

Preview

Code

Sides.razor

<Row Gap="3" Wrap Justify="Justify.Center" PaddingY="10">
    <Tooltip Text="Saved to your drafts">
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Top</Button>
    </Tooltip>
    <Tooltip Text="Opens in a new tab" Placement="Placement.Bottom">
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Bottom</Button>
    </Tooltip>
    <Tooltip Text="Back to the inbox" Placement="Placement.Start">
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Start</Button>
    </Tooltip>
    <Tooltip Text="On to the next message" Placement="Placement.End">
        <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">End</Button>
    </Tooltip>
</Row>

With the script, when there's no room on that side, such as above a button at the top of the window, it shows on the opposite side; with JavaScript off it keeps its side.

Icon buttons and shortcuts

Use Content for more than plain text, such as a keyboard shortcut in a Kbd, and Delay for how long a hover waits (300 milliseconds; keyboard focus shows it at once).

Preview Code

Preview

Code

IconButtons.razor

<Row Gap="1" Align="Align.Center" PaddingTop="10">
    <Tooltip>
        <Content>Bold <Kbd Keys="Ctrl+B" /></Content>
        <ChildContent><IconButton Icon="Lucide.Bold" Label="Bold" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" /></ChildContent>
    </Tooltip>
    <Tooltip>
        <Content>Italic <Kbd Keys="Ctrl+I" /></Content>
        <ChildContent><IconButton Icon="Lucide.Italic" Label="Italic" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" /></ChildContent>
    </Tooltip>
    <Tooltip>
        <Content>Insert link <Kbd Keys="Ctrl+K" /></Content>
        <ChildContent><IconButton Icon="Lucide.Link" Label="Insert link" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" /></ChildContent>
    </Tooltip>
    <Tooltip Text="3 unread" Delay="0">
        <IconButton Icon="Lucide.Bell" Label="Notifications" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    </Tooltip>
</Row>

Off: It's CSS alone: it shows on hover and focus, but Escape doesn't hide it and screen readers don't hear it.

Inside a tooltip, an IconButton leaves out its own title, so hovering shows one tooltip, not two; it still needs its Label.

Mode support

What works in each mode, Tooltip
Feature	Off	Static	Live
Shows on hover and keyboard focus, on the side Placement picks	Yes	Yes	Yes
Heard by screen readers as the trigger's description	No	Yes	Yes
Escape hides it	No	Yes	Yes
In the top layer, where nothing clips it	No	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It's a tooltip the script links to the first focusable element inside with aria-describedby, unless that element's aria-label already says the same.
It shows at once on keyboard focus, after Delay on hover, and Escape hides it.
The trigger must be focusable, such as a button or link; text alone can't be reached from the keyboard.
It describes, it doesn't name: an icon-only button still needs its own Label.
Never put essential content in it: touch screens can't hover, and it can't hold links or buttons.
With JavaScript off, it shows on hover and focus, but screen readers don't hear it and Escape doesn't hide it.

Parameters

Tooltip parameters
Prop	Type	Default
`Text`The tooltip text.	`string?`
`Content`Tooltip content in place of Text.	`RenderFragment?`
`Placement`Where it appears.	`Placement`	`Placement.Top`
`Delay`Milliseconds of hover before it appears.	`int`	`300`
`ChildContent`The element the tooltip describes, usually a button or link.	`RenderFragment?`

Plus 16 item props and 4 common props.

Full API