# Popover

Source: https://lumeo.nativ.sh/components/popover

# Popover

Displays rich content in a portal, triggered by a button.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Popover />

Preview Code

Default

Open Popover

Preview Code

Alignment

Start

Center

End

Preview Code

With Arrow

Top

Bottom

Left

Right

Preview Code

Placement

Top

Bottom

Left

Right

Preview Code

Side — interactive

Pick a value to see it applied live.

TopRightBottomLeft

Open (Bottom)

Preview Code

Align — interactive

Pick a value to see it applied live.

StartCenterEnd

Open (Center)

Preview Code

With Form

Update Settings

## API Reference

### Popover

Property

Type

Default

Description

Open

bool

false

Controls whether the popover is open. Use with @bind-Open for two-way binding.

OpenChanged

EventCallback<bool>

—

Callback invoked when the open state changes.

IsOpen

bool

false

Obsolete alias for `Open`; will be removed in a future release.

IsOpenChanged

EventCallback<bool>

—

Obsolete alias for `OpenChanged`; will be removed in a future release.

### PopoverContent

Property

Type

Default

Description

Side

Lumeo.Side

Bottom

Which side of the trigger the popover appears on. Values: Top, Bottom, Left, Right.

Align

Lumeo.Align

Center

Horizontal alignment of the popover relative to its trigger. Values: Start, Center, End.

ShowArrow

bool

false

Renders a small arrow pointing back at the trigger.