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
-
Views2,286
Related Articles
Fixed: Blazor Webassembly - Google Authentication Issue - Access to XMLHttpRequest at 'https://login.microsoftonline.com/.well-known/openid-configuration' from origin 'https://localhost:7215' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
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