Popover

Composition

This component is a composition of 2 key components:

LumexPopover: A component representing the popover that displays additional content within a floating container.
LumexPopoverContent: A component representing the content of the popover.

Usage

The popover component provides a simple floating container for contextual information or actions.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton OnClick="@TriggerAsync"
             data-popoverref="@_popoverId">
    Open Popover
</LumexButton>

<LumexPopover Id="@_popoverId">
    <LumexPopoverContent>
        <div class="px-1 py-2">
            <div class="text-small font-bold">Oh, hi there!</div>
            <div class="text-tiny">I am the popover content</div>
        </div>
    </LumexPopoverContent>
</LumexPopover>

@code {
    private string _popoverId = "popover-usage";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync(_popoverId);
    }
}

Colors

You can customize the background color of the popover to match your theme or highlight important content.

@using LumexUI.Services

@inject IPopoverService PopoverService

@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
{
    var id = $"popover-color-{color.ToString()}";

    <LumexButton Color="@color"
                 OnClick="@(() => TriggerAsync(id))"
                 data-popoverref="@id">
        @color.ToString()
    </LumexButton>

    <LumexPopover Id="@id" Color="@color">
        <LumexPopoverContent>
            <div class="px-1 py-2">
                <div class="text-small font-bold">Oh, hi there!</div>
                <div class="text-tiny">I am the popover content</div>
            </div>
        </LumexPopoverContent>
    </LumexPopover>
}

@code {
    private Task TriggerAsync( string id )
    {
        return PopoverService.TriggerAsync( id );
    }
}

Sizes

Adjust the font size of the popover to scale text for readability and emphasis.

@using LumexUI.Services

@inject IPopoverService PopoverService

@foreach( var size in Enum.GetValues<Size>() )
{
    var id = $"popover-size-{size.ToString()}";

    <LumexButton Color="@ThemeColor.Primary"
                 Variant="@Variant.Flat"
                 OnClick="@(() => TriggerAsync(id))"
                 data-popoverref="@id">
        @size.ToString()
    </LumexButton>

    <LumexPopover Id="@id" Size="@size">
        <LumexPopoverContent>
            <div class="px-1 py-2">
                <div class="text-small font-bold">Oh, hi there!</div>
                <div>I am the popover content</div>
            </div>
        </LumexPopoverContent>
    </LumexPopover>
}

@code {
    private Task TriggerAsync( string id )
    {
        return PopoverService.TriggerAsync( id );
    }
}

Radius

The Radius parameter allows you to set the border radius, creating rounded or square corners for the popover.

@using LumexUI.Services

@inject IPopoverService PopoverService

@foreach( var radius in Enum.GetValues<Radius>() )
{
    var id = $"popover-radius-{radius.ToString()}";

    <LumexButton Color="@ThemeColor.Secondary"
                 Variant="@Variant.Flat"
                 OnClick="@(() => TriggerAsync(id))"
                 data-popoverref="@id">
        @radius.ToString()
    </LumexButton>

    <LumexPopover Id="@id" Radius="@radius">
        <LumexPopoverContent>
            <div class="px-1 py-2">
                <div class="text-small font-bold">Oh, hi there!</div>
                <div class="text-tiny">I am the popover content</div>
            </div>
        </LumexPopoverContent>
    </LumexPopover>
}

@code {
    private Task TriggerAsync( string id )
    {
        return PopoverService.TriggerAsync( id );
    }
}

Shadows

Adjust a shadow effect to the popover for a more elevated, visually distinct appearance.

@using LumexUI.Services

@inject IPopoverService PopoverService

@foreach( var shadow in Enum.GetValues<Shadow>() )
{
    var id = $"popover-shadow-{shadow.ToString()}";

    <LumexButton Color="@ThemeColor.Success"
                 Variant="@Variant.Flat"
                 OnClick="@(() => TriggerAsync(id))"
                 data-popoverref="@id">
        @shadow.ToString()
    </LumexButton>

    <LumexPopover Id="@id" Shadow="@shadow">
        <LumexPopoverContent>
            <div class="px-1 py-2">
                <div class="text-small font-bold">Oh, hi there!</div>
                <div>I am the popover content</div>
            </div>
        </LumexPopoverContent>
    </LumexPopover>
}

@code {
    private Task TriggerAsync( string id )
    {
        return PopoverService.TriggerAsync( id );
    }
}

Placements

Specify the position of the popover relative to the trigger element, with options like Right, Left, TopStart, and more.

@using LumexUI.Services

@inject IPopoverService PopoverService

<div class="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
    @foreach( var placement in Enum.GetValues<PopoverPlacement>() )
    {
        var id = $"popover-placement-{placement.ToString()}";

        <LumexButton Color="@ThemeColor.Danger"
                     Variant="@Variant.Flat"
                     OnClick="@(() => TriggerAsync(id))"
                     Class="capitalize"
                     data-popoverref="@id">
            @placement.ToDescription().Replace( "-", " " )
        </LumexButton>

        <LumexPopover Id="@id" Placement="@placement">
            <LumexPopoverContent>
                <div class="px-1 py-2">
                    <div class="text-small font-bold">Oh, hi there!</div>
                    <div class="text-tiny">I am the popover content</div>
                </div>
            </LumexPopoverContent>
        </LumexPopover>
    }
</div>

@code {
    private Task TriggerAsync( string id )
    {
        return PopoverService.TriggerAsync( id );
    }
}

Offset

Set an offset to adjust the distance between the popover and its trigger element for finer control over placement.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton OnClick="@TriggerAsync"
             data-popoverref="@_popoverId">
    Open Popover
</LumexButton>

<LumexPopover Id="@_popoverId" Offset="16">
    <LumexPopoverContent>
        <div class="px-1 py-2">
            <div class="text-small font-bold">Oh, hi there!</div>
            <div class="text-tiny">I am the popover content</div>
        </div>
    </LumexPopoverContent>
</LumexPopover>

@code {
    private string _popoverId = "popover-offset";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _popoverId );
    }
}

Arrow

Enable an arrow on the popover to visually connect it to its trigger element, making the source of information clearer.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton OnClick="@TriggerAsync"
             data-popoverref="@_popoverId">
    Open Popover
</LumexButton>

<LumexPopover Id="@_popoverId" ShowArrow="@true">
    <LumexPopoverContent>
        <div class="px-1 py-2">
            <div class="text-small font-bold">Oh, hi there!</div>
            <div class="text-tiny">I am the popover content</div>
        </div>
    </LumexPopoverContent>
</LumexPopover>

@code {
    private string _popoverId = "popover-arrow";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _popoverId );
    }
}

Custom Styles

This component supports named slots that allow you to apply custom CSS to specific parts of the component.

Base: The overall container of the popover.
Content: The container of the popover content.
Arrow: The arrow element that connects the popover 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 name that styles the wrapper of the popover.
Classes: The CSS class names for the popover slots that style entire popover.

@using LumexUI.Services

@inject IPopoverService PopoverService

<LumexButton OnClick="@TriggerAsync"
             data-popoverref="@_popoverId">
    Open Popover
</LumexButton>

<LumexPopover Id="@_popoverId"
              Placement="@PopoverPlacement.Right"
              ShowArrow="@true"
              Offset="16"
              Classes="@_classes">
    <LumexPopoverContent>
        <div class="px-1 py-2">
            <h3 class="text-small font-bold">Oh, hi there!</h3>
            <div class="text-tiny">I am the popover content</div>
        </div>
    </LumexPopoverContent>
</LumexPopover>

@code {
    private PopoverSlots _classes = new()
    {
        Content = ElementClass.Empty()
            .Add( "py-3 px-4 border border-default-200" )
            .Add( "bg-gradient-to-br from-white to-default-200" )
            .ToString(),
        Arrow = "bg-default-200"
    };

    private string _popoverId = "popover-custom-styles";

    private Task TriggerAsync()
    {
        return PopoverService.TriggerAsync( _popoverId );
    }
}

API

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

Popover

On this page