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:

  1. Blazor Bootstrap: Quick Start
  2. Blazor Bootstrap: Alert Component Examples
  3. Blazor Bootstrap: Buttons Examples
  4. Blazor Bootstrap: Icons Component Examples
  5. Blazor Bootstrap: Modal Component Examples
  6. Blazor Bootstrap: Offcanvas Component Example
  7. Blazor Bootstrap: Toasts Component Examples
  8. Blazor Bootstrap: Tooltip Component Examples