Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Tooltip

Provides a tooltip after hovering over the mouse or gaining focus

Basic usage

Often used to display the prompt information when the mouse hovers

Demo

<div class="d-flex flex-column w-100 tooltip-demo">
    <div class="d-flex justify-content-center">
        <Tooltip Placement="Placement.Bottom" Title="Tootip">
            <BootstrapInput Value="@BottomString" aria-label="@BottomString" />
        </Tooltip>
    </div>
    <div class="d-flex justify-content-between align-items-center flex-fill">
        <Tooltip Placement="Placement.Right" Title="Tootip">
            <BootstrapInput Value="@RightString" aria-label="@RightString" />
        </Tooltip>
        <Tooltip Placement="Placement.Left" Title="Tootip">
            <BootstrapInput Value="@LeftString" aria-label="@LeftString" />
        </Tooltip>
    </div>
    <div class="d-flex justify-content-center">
        <Tooltip Placement="Placement.Top" Title="Tootip">
            <BootstrapInput Value="@TopString" aria-label="@TopString" />
        </Tooltip>
    </div>
</div>

@code {
    private static string TopString => "Tooltip on top";

    private static string LeftString => "Tooltip on left";

    private static string RightString => "Tooltip on right";

    private static string BottomString => "Tooltip on bottom";
}

Button component tooltip

Provides a tooltip after hovering over the mouse or gaining focus

Demo

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3">
        <Tooltip Placement="Placement.Top" Title="Tootip" Trigger="click">
            <Button Text="@TopString" />
        </Tooltip>
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Tooltip Placement="Placement.Left" Title="Tootip" Trigger="click">
            <Button Text="@LeftString" />
        </Tooltip>
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Tooltip Placement="Placement.Bottom" Title="Tootip" Trigger="click">
            <Button Text="@BottomString" />
        </Tooltip>
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Tooltip Placement="Placement.Right" Title="Tootip" Trigger="click">
            <Button Text="@RightString" />
        </Tooltip>
    </div>
</div>

@code {
    private static string TopString => "Tooltip on top";

    private static string LeftString => "Tooltip on left";

    private static string RightString => "Tooltip on right";

    private static string BottomString => "Tooltip on bottom";
}

test component

Try to make a new component that is more comfortable to use, you can use it early, the name of the component may be changed later

Demo

Wrap other components or HTML elements through BootstrapTooltip so that the wrapped object has the function of Tooltip

In this example, an icon is wrapped by BootstrapTooltip. When the mouse moves over the icon, the default Tooltip is displayed, which is easier and faster to use.

<BootstrapTooltip Title="Test tooltip">
    <i class="fa-solid fa-flag" />
</BootstrapTooltip>

<Tooltip Title="Test tooltip">
    <i class="fa-solid fa-flag" />
</Tooltip>

Prompt host settings

Precisely locate trigger prompt box elements by setting Selector parameters

Demo

<Tooltip Title="@HtmlString" IsHtml="true" Sanitize="false" Selector=".tooltip-selector">
    <div>
        <i class="fa-solid fa-flag" />
        <span class="tooltip-selector ms-2">This is Tooltip</span>
    </div>
</Tooltip>

@code {
    private static string HtmlString => "This is <a href=\"www.blazor.zone\">Blazor</a> tooltip";
}

custom style

Set the custom style by setting the CustomClass parameter

Demo

<Tooltip Title="Test tooltip" CustomClass="is-invalid">
    <i class="fa-solid fa-flag" />
</Tooltip>

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Tooltip

Provides a tooltip after hovering over the mouse or gaining focus

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01