Popover

Composition

This component is a composition of 3 key components:

LumexPopover: A component representing the popover that displays additional content within a floating container.
LumexPopoverTrigger: A component representing the trigger of the popover, controlling its display.
LumexPopoverContent: A component representing the content of the popover.

Usage

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

<LumexPopover>
    <LumexPopoverTrigger>
        Open Popover
    </LumexPopoverTrigger>
    <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>

Colors

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

@foreach( var color in _colors )
{
    <LumexPopover Color="@color">
        <LumexPopoverTrigger>
            @color.ToString()
        </LumexPopoverTrigger>
        <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 readonly ThemeColor[] _colors = [
        ThemeColor.Default,
        ThemeColor.Primary,
        ThemeColor.Secondary,
        ThemeColor.Success,
        ThemeColor.Warning,
        ThemeColor.Danger,
        ThemeColor.Info
    ];
}

Sizes

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

@foreach( var size in _sizes )
{
    <LumexPopover Size="@size">
        <LumexPopoverTrigger Color="@ThemeColor.Primary"
                             Variant="@Variant.Flat">
            @size.ToString()
        </LumexPopoverTrigger>
        <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 readonly Size[] _sizes = [
        Size.Small,
        Size.Medium,
        Size.Large
    ];
}

Radius

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

@foreach( var radius in _radiuses )
{
    <LumexPopover Radius="@radius">
        <LumexPopoverTrigger Color="@ThemeColor.Secondary"
                             Variant="@Variant.Flat">
            @radius.ToString()
        </LumexPopoverTrigger>
        <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 readonly Radius[] _radiuses = [
        Radius.None,
        Radius.Small,
        Radius.Medium,
        Radius.Large
    ];
}

Shadows

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

@foreach( var shadow in _shadows )
{
    <LumexPopover Shadow="@shadow">
        <LumexPopoverTrigger Color="@ThemeColor.Success"
                             Variant="@Variant.Flat">
            @shadow.ToString()
        </LumexPopoverTrigger>
        <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 readonly Shadow[] _shadows = [
        Shadow.None,
        Shadow.Small,
        Shadow.Medium,
        Shadow.Large
    ];
}

Placements

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

<div class="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
    @foreach( var placement in _placements )
    {
        <LumexPopover Placement="@placement">
            <LumexPopoverTrigger Color="@ThemeColor.Danger"
                                 Variant="@Variant.Flat"
                                 Class="capitalize">
                @placement.ToDescription().Replace( "-", " " )
            </LumexPopoverTrigger>
            <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 readonly PopoverPlacement[] _placements = [
        PopoverPlacement.TopStart,
        PopoverPlacement.Top,
        PopoverPlacement.TopEnd,
        PopoverPlacement.RightStart,
        PopoverPlacement.Right,
        PopoverPlacement.RightEnd,
        PopoverPlacement.BottomStart,
        PopoverPlacement.Bottom,
        PopoverPlacement.BottomEnd,
        PopoverPlacement.LeftStart,
        PopoverPlacement.Left,
        PopoverPlacement.LeftEnd
    ];
}

Offset

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

<LumexPopover Offset="16">
    <LumexPopoverTrigger>
        Open Popover
    </LumexPopoverTrigger>
    <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>

Arrow

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

<LumexPopover ShowArrow="@true">
    <LumexPopoverTrigger>
        Open Popover
    </LumexPopoverTrigger>
    <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>

Custom Styles

This component suppots named slots (represented as data-* attributes) that allow you to apply custom CSS to specific parts of the component.

Root: The overall container of the popover.
Trigger: The element that triggers 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.

<LumexPopover Placement="@PopoverPlacement.Right"
              ShowArrow="@true"
              Offset="16"
              Classes="@_classes">
    <LumexPopoverTrigger>
        Open Popover
    </LumexPopoverTrigger>
    <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"
    };
}

API

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

Popover

On this page