Popover

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

Basic

Click the button to show the popover content.

<Popover>
    <PopoverTrigger>
        <Button Variant="ButtonVariant.Outline">Open popover</Button>
    </PopoverTrigger>
    <PopoverContent>
        <div class="grid gap-4">
            <div class="space-y-2">
                <h4 class="font-medium leading-none">Dimensions</h4>
                <p class="text-sm text-muted-foreground">
                    Set the dimensions for the layer.
                </p>
            </div>
            <div class="grid gap-2">
                <div class="grid grid-cols-3 items-center gap-4">
                    <Label>Width</Label>
                    <Input Class="col-span-2 h-8" />
                </div>
            </div>
        </div>
    </PopoverContent>
</Popover>

Controlled

Control the popover state programmatically.

@code {
    private bool popoverOpen;
}

<Popover @bind-Open="popoverOpen">
    <PopoverTrigger>
        <Button>Toggle Popover</Button>
    </PopoverTrigger>
    <PopoverContent>
        <p>This is a controlled popover.</p>
        <Button @onclick="() => popoverOpen = false">Close</Button>
    </PopoverContent>
</Popover>