Blazor Tooltips

Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages.

Parameters

Name	Type	Description	Required	Default	Added Version
ChildContent	RenderFragment	Specifies the content to be rendered inside this.			1.0.0
Color	TooltipColor	Gets or sets the tooltip color.		TooltipColor.None	1.10.0
IsHtml	bool	Gets or sets a value indicating whether to display the content as HTML instead of text.		false	2.1.0
Placement	TooltipPlacement	Specifies the tooltip placement. Default is top right.		TooltipPlacement.Top	1.0.0
Title	string	Displays informative text when users hover, focus, or tap an element.	✔️		1.0.0

Examples

Tooltips

<div>
    <Tooltip Title="Tooltip Left" Placement="TooltipPlacement.Left">Tooltip Left</Tooltip>
</div>
<div>
    <Tooltip Title="Tooltip Top">Tooltip Top</Tooltip>
</div>
<div>
    <Tooltip Title="Tooltip Right" Placement="TooltipPlacement.Right">Tooltip Right</Tooltip>
</div>
<div>
    <Tooltip Title="Tooltip Bottom" Placement="TooltipPlacement.Bottom">Tooltip Bottom</Tooltip>
</div>

See tooltips demo here.

Disabled button with tooltip

<Tooltip Class="d-inline-block" Title="Disabled button"role="button">
    <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</Tooltip>

See disabled button with tooltip demo here.

Tooltip icon with click event

<Tooltip Title="Click here" @onclick="OnClick" role="button">
    <i class="bi bi-arrow-repeat text-danger"></i>
</Tooltip>

@code {
    private void OnClick()
    {
        Console.WriteLine($"clicked");
    }
}

See icon with tooltip demo here.

Dynamically update the tooltip text

<div class="mb-3">
    <Tooltip Title="@text" Placement="TooltipPlacement.Top">Tooltip Bottom</Tooltip>
</div>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ChangeTooltip">Change Tooltip</Button>

@code {
    private string text = "Tooltip text";

    private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}";
}

see demo here

Tooltip with HTML

<Tooltip Class="me-4" Title="<strong>Tooltip</strong> <em>with</em> <u>HTML</u>" IsHtml="true">Tooltip with HTML</Tooltip>

see demo here