Blazor Tooltips

Examples#

Tooltip Left
Tooltip Top
Tooltip Right
Tooltip Bottom
<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>

Disabled button with tootip#

<Tooltip Class="d-inline-block" Title="Disabled button"role="button">
    <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</Tooltip>
TIP
By default, Button supports tooltips via TooltipTitle and TooltipPlacement parameters. See Buttons - 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");
    }
}

Dynamically update the tooltip text#

Tooltip Bottom
<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()}";
}