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>

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

API

Parameters

Parameter	Description	Type	Default
`AlwaysActive`	Always show tooltip, instead of just when hovering over the element.	`bool`	`false`
`AppendTo`	The element to append the tooltip to. If Interactive = true, the default behavior is appendTo: "parent".	`string`
`ChildContent`	Specifies the content to be rendered inside this Tooltip.	`RenderFragment`	`null`
`Fade`	Makes the tooltip fade transition.	`bool`	`false`
`FadeDuration`	Duration in ms of the fade transition animation.	`int`	`300`
`HideDelay`	Specifies the delay in ms once a trigger event is fired before a Tooltip hides.	`int?`	`null`
`Inline`	Force inline block instead of trying to detect the element block.	`bool`	`false`
`Interactive`	Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside without hiding.	`bool`	`false`
`Multiline`	Force the multiline display.	`bool`	`false`
`Placement`	Gets or sets the tooltip location relative to its component. Possible values:`Top`, `TopStart`, `TopEnd`, `Bottom`, `BottomStart`, `BottomEnd`, `Left`, `LeftStart`, `LeftEnd`, `Right`, `RightStart`, `RightEnd`	`TooltipPlacement`	`TooltipPlacement.Top`
`ShowArrow`	Gets or sets the tooltip arrow visibility.	`bool`	`true`
`ShowDelay`	Specifies the delay in ms once a trigger event is fired before a Tooltip shows.	`int?`	`null`
`Text`	Gets or sets a regular tooltip's content.	`string`
`Trigger`	Determines the events that cause the tooltip to show. Possible values:`MouseEnterFocus`, `Click`, `Focus`, `MouseEnterClick`	`TooltipTrigger`	`default(TooltipTrigger)`
`TriggerTargetId`	Which element the trigger event listeners are applied to (instead of the reference element).	`string`
`ZIndex`	Specifies the z-index CSS on the root popper node.	`int?`	`9999`