Feedback

TwTooltip

TwTooltip is a Blazor tooltip that wraps any content and shows an accessible bubble on hover and focus. Set Text or TooltipContent and a Placement.

Last updated 9 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Wrap any content in TwTooltip and set Text. The bubble appears when the content is hovered or keyboard-focused, and is linked to it with aria-describedby. On a touch screen, where there is no hover, a tap on the content shows the bubble and a tap anywhere else hides it. A bubble opened by a tap is kept inside the edges of the screen.

RAZOR

<TwTooltip Text="Tooltips add detail without cluttering the page.">
    <p>A paragraph with a tooltip</p>
</TwTooltip>

Placement

Use Placement to show the bubble above (default), below, left or right of the content.

RAZOR

<div class="flex flex-wrap items-center justify-center gap-16 py-10">
    <TwTooltip Text="Shown above" Placement="TooltipPlacement.Top">Top</TwTooltip>
    <TwTooltip Text="Shown below" Placement="TooltipPlacement.Bottom">Bottom</TwTooltip>
    <TwTooltip Text="Shown to the left" Placement="TooltipPlacement.Left">Left</TwTooltip>
    <TwTooltip Text="Shown to the right" Placement="TooltipPlacement.Right">Right</TwTooltip>
</div>

Arrow

Set Arrow to add a small pointer from the bubble to the content. It follows Placement and is decorative, so it is hidden from assistive technology.

RAZOR

<div class="flex flex-wrap items-center justify-center gap-16 py-10">
    <TwTooltip Text="Shown above" Arrow="true">Top</TwTooltip>
    <TwTooltip Text="Shown below" Placement="TooltipPlacement.Bottom" Arrow="true">Bottom</TwTooltip>
    <TwTooltip Text="Shown to the left" Placement="TooltipPlacement.Left" Arrow="true">Left</TwTooltip>
    <TwTooltip Text="Shown to the right" Placement="TooltipPlacement.Right" Arrow="true">Right</TwTooltip>
</div>

Rich content

Use TooltipContent for formatted text instead of Text. Keep it non-interactive: a tooltip cannot be tabbed into, so links or buttons inside it would be unreachable.

RAZOR

<TwTooltip>
    <TooltipContent>
        <strong>Keyboard shortcut</strong>
        <br />
        Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.
    </TooltipContent>
    <ChildContent>
        <span class="underline decoration-dotted">Save shortcut</span>
    </ChildContent>
</TwTooltip>

Wrapping interactive content

By default the wrapper joins the tab order so keyboard users can reveal the tooltip on content such as a paragraph. When the content already contains a focusable control, set Focusable to false to avoid a duplicate tab stop; the tooltip still appears when that control is focused. For buttons and icon buttons, the Tooltip parameter on TwButton or TwIcon links the tooltip to the control itself.

RAZOR

<TwTooltip Text="Opens the account menu" Focusable="false">
    <TwButton Label="Account" Color="Color.Primary" />
</TwTooltip>

Disabled

Set Disabled to render the content without a bubble or tab stop, for example while an action is unavailable.

RAZOR

<TwTooltip Text="You will not see this" Disabled="true">
    <p>No tooltip here</p>
</TwTooltip>

A tooltip appears when its content gets keyboard focus, as well as on hover. Wrapped around a button or a link it describes that control and adds no Tab stop of its own; around plain content the wrapper is the Tab stop.

Key	What it does
`Tab`	Moves focus to the content and shows its tooltip.
`Escape`	Hides the tooltip without moving focus.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwTooltipTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Wrapper`	string
`Bubble`	string
`Dismissed`	string
`Top`	string
`Bottom`	string
`Left`	string
`Right`	string
`Arrow`	string
`ArrowTop`	string
`ArrowBottom`	string
`ArrowLeft`	string
`ArrowRight`	string

Full reference: TwTooltipTheme on the API docs.

TwTooltip

Basic usage

Placement

Arrow

Rich content

Wrapping interactive content

Disabled

Keyboard navigation

Theme configuration