Blazor Tooltip
Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages.
Examples #
Tooltip Left
Tooltip Top
Tooltip Right
Tooltip Bottom
<Tooltip Class="me-4" Title="Tooltip Left" Placement="TooltipPlacement.Left">Tooltip Left</Tooltip>
<Tooltip Class="me-4" Title="Tooltip Top">Tooltip Top</Tooltip>
<Tooltip Class="me-4" Title="Tooltip Right" Placement="TooltipPlacement.Right">Tooltip Right</Tooltip>
<Tooltip Class="me-4" Title="Tooltip Bottom" Placement="TooltipPlacement.Bottom">Tooltip Bottom</Tooltip>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");
}
}Custom tooltips #
Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose.
The Color parameter can be used to customize the color of the tooltip.
Dynamically change the tooltip color #
Tooltip Top
<Tooltip Title="@title" Color="@tooltipColor">Tooltip Top</Tooltip>
<br/>
<br />
<Button Color="ButtonColor.Primary" @onclick="UpdateTooltipToPrimary">Change Tooltip Color</Button>
<Button Color="ButtonColor.Success" @onclick="UpdateTooltipToSuccess">Change Tooltip Color</Button>
<Button Color="ButtonColor.Danger" @onclick="UpdateTooltipToDanger">Change Tooltip Color</Button>
@code {
private string? title = "Tooltip Top";
private TooltipColor tooltipColor;
private void UpdateTooltipToPrimary()
{
tooltipColor = TooltipColor.Primary;
title = "Tooltip Top Primary";
}
private void UpdateTooltipToSuccess()
{
tooltipColor = TooltipColor.Success;
title = "Tooltip Top Success";
}
private void UpdateTooltipToDanger()
{
tooltipColor = TooltipColor.Danger;
title = "Tooltip Top Danger";
}
}Tooltip with HTML #
Tooltip with HTML
<Tooltip Class="me-4" Title="<strong>Tooltip</strong> <em>with</em> <u>HTML</u>" IsHtml="true">Tooltip with HTML</Tooltip>