Blazorise Tooltip component

Tooltips display additional information based on a specific action.

The <Tooltip> component is useful for conveying information when a user hovers over an element. When activated, tooltips display a text label identifying an element, such as a description of its function.

Starting with v0.9.4, Tooltip component is powered by Tippy.js.

Examples

Basic

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

Positions

You can use one of the following modifiers to change positions of the tooltip:

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>

Different trigger target

You may want the tooltip to appear at a different location from its trigger (event listeners) target.

<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

Your tooltip can also contain HTML.

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

Delay

Your Tooltip can delay hiding or showing after a trigger.

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