Blazorise Tooltip component

Display short, contextual hints on hover, focus, or tap.

Use the <Tooltip> component to provide extra context without taking up permanent space in the UI. Tooltips are a good fit for icons, buttons, and truncated text that needs a full-value preview.

Overview

Text sets the tooltip content.
Placement controls where the tooltip appears relative to its target.
Trigger controls which events show the tooltip (hover/focus/click).
Multiline allows long tooltip text to wrap.
ShowDelay and HideDelay delay showing and hiding (in milliseconds).
Inline forces the tooltip wrapper to behave as inline-block (useful when wrapping inline content).
TriggerTargetId applies trigger event listeners to a different element than the tooltip target.

Text truncation: if you use TextOverflow.Truncate on the tooltip target and it renders as an inline element (e.g. <Text>, <Span>, or <span>), set it to display: inline-block (or block) and apply a width (for example via max-width).

Examples

Basic

Wrap any element with a <Tooltip> and set its Text.

<Tooltip Text="Hello tooltip">
    <Button Color="Color.Primary">Hover me</Button>
</Tooltip>

Text truncation

Truncate the visible target text, and show the full value on hover via the tooltip. TextOverflow.Truncate requires the target element to have a width, so make it Display.InlineBlock (or apply style="display: inline-block;").

<Tooltip Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry..." Multiline Inline>
    <Text TextOverflow="TextOverflow.Truncate" Display="Display.InlineBlock" Style="max-width: 200px; cursor: pointer;" TextColor="TextColor.Muted">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry...
    </Text>
</Tooltip>

Placement

Use the Placement parameter to change where the tooltip appears:

Top
Bottom
Left
Right

<Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Top">
    <Button Color="Color.Primary">Top tooltip</Button>
</Tooltip>
<Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Right">
    <Button Color="Color.Primary">Right tooltip</Button>
</Tooltip>
<Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Left">
    <Button Color="Color.Primary">Left tooltip</Button>
</Tooltip>
<Tooltip Text="Hello tooltip" Placement="TooltipPlacement.Bottom">
    <Button Color="Color.Primary">Bottom tooltip</Button>
</Tooltip>

Trigger target

Use TriggerTargetId when the tooltip should be positioned relative to one element, but triggered by another.

<Div ElementId="tooltip-custom-target">
    Trigger target vs
    <Tooltip Text="I'm a tooltip!" TriggerTargetId="tooltip-custom-target" Inline>
        <Badge Color="Color.Warning">positioning target</Badge>
    </Tooltip>
</Div>

HTML content

Text can contain HTML markup. Only use this with trusted strings (or sanitize user-provided content).

<Tooltip Text="<span style='color: aqua;'>Hello</span>, this is a <strong>bolded content</strong>!">
    <Button Color="Color.Primary">Html content</Button>
</Tooltip>

Delay

Control how quickly the tooltip shows and hides after the trigger event (in milliseconds).

<Tooltip Text="I'm a Blazorise Tooltip!" ShowDelay="1000" HideDelay="500">
    <Button Color="Color.Primary">Delay: (1000, 500)</Button>
</Tooltip>

Best Practices

Essential Information

A tooltip should contain brief supplementary information rather than essential instructions or validation feedback. Write concise text that adds useful context instead of repeating the trigger's visible label.

Input Methods

Keyboard focus should reveal the same tooltip as pointer hover, and users should not need to interact with controls inside it. Touch-only experiences cannot depend on hover, so provide a visible label or help control whenever the information is needed there.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Tooltip />