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