Blazor Tooltips

Examples#

Tooltip Left Tooltip Top Tooltip Right Tooltip Bottom
razor 
<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#

razor 
<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#

razor 
<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

razor 
<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
razor 
<Tooltip Class="me-4" Title="<strong>Tooltip</strong> <em>with</em> <u>HTML</u>" IsHtml="true">Tooltip with HTML</Tooltip>
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community