Blazor Bootstrap: Tooltip Component Examples
Tooltip
<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>
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");
}
}
Blazor Bootstrap Links:
- Blazor Bootstrap: Quick Start
- Blazor Bootstrap: Alert Component Examples
- Blazor Bootstrap: Buttons Examples
- Blazor Bootstrap: Icons Component Examples
- Blazor Bootstrap: Modal Component Examples
- Blazor Bootstrap: Offcanvas Component Example
- Blazor Bootstrap: Toasts Component Examples
- Blazor Bootstrap: Tooltip Component Examples
-
CreatedDec 12, 2021
-
UpdatedDec 12, 2021
-
Views1,292
Related Articles
Blazor Bootstrap: Alert Component Examples
Blazor Bootstrap: Icon Component Examples
Blazor Bootstrap: Toasts Component Examples
Blazor Bootstrap: Modal Component Examples
Blazor Bootstrap: Offcanvas examples
Blazor Bootstrap: Button Examples
Blazor Bootstrap: Quick Start
How to migrate Blazor WebAssembly App to .NET 5
Blazor: How to bind employees to table / grid
Learn how to create your first Blazor project using .NET 5