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.
TooltipContent renders custom Blazor content and takes precedence over Text.
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).
Animation selects a provider-aware show and hide effect.
When Inline is omitted, the CSS provider automatically selects inline-block layout for its supported targets. Set Inline="true" to force inline-block layout or Inline="false" to force block layout.
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" Width="Width.Px().Max( 200 )" Style="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>

Rich content

Use TooltipContent to compose tooltip content with Blazorise typography components and utility parameters. The wrapped ChildContent remains the tooltip target.

<Tooltip Multiline Padding="Padding.Is3">
    <ChildContent>
        <Button Color="Color.Primary">Rich content</Button>
    </ChildContent>
    <TooltipContent>
        <Div Flex="Flex.Column" Gap="Gap.Is2">
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.CheckCircle" TextColor="TextColor.Success" />
                <Heading Size="HeadingSize.Is6" TextWeight="TextWeight.SemiBold" Margin="Margin.Is0">
                    Deployment ready
                </Heading>
            </Div>
            <Paragraph TextSize="TextSize.Small" Margin="Margin.Is0">
                All production checks passed successfully.
            </Paragraph>
            <Small TextColor="TextColor.Info">Updated just now</Small>
        </Div>
    </TooltipContent>
</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>

Animation

Use Animation to choose a fade, scale, directional shift, or blur effect. Combine effects with the bitwise OR operator. TooltipAnimation.Auto follows the active provider's preferred tooltip motion and takes precedence over combined effects.

<Div Flex="Flex.Wrap" Gap="Gap.Is2">
    <Tooltip Text="Uses the animation preferred by the active provider." Animation="TooltipAnimation.Auto">
        <Button Color="Color.Primary">Auto</Button>
    </Tooltip>
    <Tooltip Text="A simple opacity transition." Animation="TooltipAnimation.Fade">
        <Button Color="Color.Secondary">Fade</Button>
    </Tooltip>
    <Tooltip Text="Fades while gently scaling." Animation="TooltipAnimation.FadeScale">
        <Button Color="Color.Success">Fade scale</Button>
    </Tooltip>
    <Tooltip Text="Fades toward the target." Animation="TooltipAnimation.FadeShift">
        <Button Color="Color.Info">Fade shift</Button>
    </Tooltip>
    <Tooltip Text="Fades through a subtle blur." Animation="TooltipAnimation.FadeBlur">
        <Button Color="Color.Warning">Fade blur</Button>
    </Tooltip>
    <Tooltip Text="Combines fade, scale, and shift effects." Animation="@( TooltipAnimation.Fade | TooltipAnimation.Scale | TooltipAnimation.Shift )">
        <Button Color="Color.Danger">Combined</Button>
    </Tooltip>
</Div>

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 />