Tooltip

Usage

<LumexTooltip Content="@("I am a tooltip")">
    <LumexButton>Hover me</LumexButton>
</LumexTooltip>

Colors

Use Color parameter to set the tooltip background color.

@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
{
    var colorText = color.ToString();

    <LumexTooltip Content="@colorText" Color="@color">
        <LumexButton Color="@color">@colorText</LumexButton>
    </LumexTooltip>
}

Sizes

Use Size parameter to adjust the font size of the tooltip.

@foreach( var size in Enum.GetValues<Size>() )
{
    var sizeText = size.ToString();

    <LumexTooltip Content="@sizeText" Size="@size">
        <LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Flat">
            @sizeText
        </LumexButton>
    </LumexTooltip>
}

Radius

Use Radius parameter to control the border radius of the tooltip.

@foreach( var radius in Enum.GetValues<Radius>() )
{
    var radiusText = radius.ToString();

    <LumexTooltip Content="@radiusText" Radius="@radius">
        <LumexButton Variant="@Variant.Flat" Color="@ThemeColor.Secondary">
            @radiusText
        </LumexButton>
    </LumexTooltip>
}

Shadows

Use Shadow parameter to apply a shadow to the tooltip.

@foreach( var shadow in Enum.GetValues<Shadow>() )
{
    var shadowText = shadow.ToString();

    <LumexTooltip Content="@shadowText" Shadow="@shadow">
        <LumexButton Variant="@Variant.Flat" Color="@ThemeColor.Success">
            @shadowText
        </LumexButton>
    </LumexTooltip>
}

Placements

Use Placement parameter to control where the tooltip appears relative to the anchor element.

<div class="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
    @foreach( var placement in Enum.GetValues<TooltipPlacement>() )
    {
        var placementText = placement.ToDescription().Replace( "-", " " );

        <LumexTooltip Content="@placementText" Placement="@placement">
            <LumexButton Color="@ThemeColor.Danger"
                         Variant="@Variant.Flat"
                         FullWidth="@true"
                         Class="capitalize">
                @placementText
            </LumexButton>
        </LumexTooltip>
    }
</div>

Offset

Use Offset parameter to set the distance between the tooltip and the anchor.

<LumexTooltip Content="@("I am a tooltip")"
              Color="@ThemeColor.Warning">
    <LumexButton Color="@ThemeColor.Warning"
                 Variant="@Variant.Flat">
        Default offset (8)
    </LumexButton>
</LumexTooltip>

<LumexTooltip Content="@("I am a tooltip")" Offset="16"
              Color="@ThemeColor.Warning">
    <LumexButton Color="@ThemeColor.Warning"
                 Variant="@Variant.Flat">
        16 offset
    </LumexButton>
</LumexTooltip>

<LumexTooltip Content="@("I am a tooltip")" Offset="-7"
              Color="@ThemeColor.Warning">
    <LumexButton Color="@ThemeColor.Warning"
                 Variant="@Variant.Flat">
        -7 offset
    </LumexButton>
</LumexTooltip>

Arrow

Use Arrow parameter to toggle the display of the tooltip arrow.

<LumexTooltip Content="@("I am a tooltip")" ShowArrow="@true">
    <LumexButton>Hover me</LumexButton>
</LumexTooltip>

Custom Content

Use Content parameter to render custom markup content in the tooltip.

<LumexTooltip Content="@_customContent">
    <LumexButton>Hover me</LumexButton>
</LumexTooltip>

@code {
    private RenderFragment _customContent =
        @<div class="px-1 py-2">
            <div class="text-small font-bold">Custom content</div>
            <div class="text-tiny">This is a custom tooltip content</div>
        </div>;
}

Two-way Data Binding

Use @bind-Open directive or Open and OpenChanged parameters to manually control tooltip visibility.

Open: false

<div class="flex flex-col gap-2">
    <LumexTooltip Content="@("I am a tooltip")" @bind-Open="@_isOpen">
        <LumexButton>Hover me</LumexButton>
    </LumexTooltip>

    <p class="text-small text-default-500">
        Open: @(_isOpen ? "true" : "false")
    </p>
</div>

@code {
    private bool _isOpen;
}

Custom styles

This component supports named slots, which allow custom styles to be applied to specific parts of the component:

Base: The overall container of the tooltip.
Content: The container of the tooltip content.
Arrow: The arrow element that connects the tooltip to its trigger element.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Class: The CSS class names to style the tooltip wrapper.
Classes: The CSS class names to style the tooltip slots.

<LumexTooltip Content="@("I am a tooltip")"
              Placement="@TooltipPlacement.Right"
              ShowArrow="@true"
              Classes="@_classes">
    <LumexButton>Hover me</LumexButton>
</LumexTooltip>

@code {
    private TooltipSlots _classes = new()
    {
        Content = ElementClass.Empty()
            .Add( "py-2 px-4 shadow-xl" )
            .Add( "text-black bg-gradient-to-br from-white to-default-400" )
            .ToString(),
        Arrow = "bg-default-400"
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

Tooltip

On this page