Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Popover
Displays rich interactive content in a floating portal, triggered by a button or other element. Use for forms, settings panels, and any content that needs to appear near its trigger without leaving the current page context.
Default
A basic
Popover with a trigger button that opens a floating content panel below it. The popover includes form fields for editing dimensions, demonstrating how to compose rich interactive content. The content panel closes when clicking outside or pressing Escape.
Loading example…
Positions
Use the
Side parameter on PopoverContent to control which side the popover appears on relative to its trigger. Available values are Top, Right, Bottom, and Left. The popover automatically flips to the opposite side if there is not enough viewport space.
Loading example…
With Form
A
Popover containing a settings form with toggle switches. Set the class attribute on PopoverContent to control the width, such as w-80 for a wider panel. This pattern is useful for quick settings that do not warrant a full dialog or page navigation.
Loading example…
Custom Trigger
A
Popover with a custom styled trigger that mimics a date picker input. Set Align to PopoverAlign.Start and class="w-auto p-0" on PopoverContent to remove default padding and let the inner content define the panel size. This is the standard pattern for date pickers and dropdown selects.
Loading example…