Popover
Displays rich content in a portal, triggered by a button using the native Popover API.
CSS Anchor Positioning Status
Anchor Positioning API
Using positioning props to simplify anchor positioning without manual style attributes.
The Side prop specifies where the popover appears relative to the trigger:
- Side: "top" popover appears above the trigger
- Side: "bottom" popover appears below the trigger
- Side: "left" popover appears left of the trigger
- Side: "right" popover appears right of the trigger
Top Side Popover
This popover appears above the trigger using Side="top".
Right Side Popover
This popover appears to the right of the trigger using Side="right".
Left Side Popover
This popover appears to the left of the trigger using Side="left".
Bottom Side Popover
This popover appears below the trigger using Side="bottom".
Custom Triggers with AsChild
Using the AsChild prop to create custom trigger elements instead of standard buttons.
Card Trigger
User Profile
Click for details
John Doe
Software Engineer at Acme Corp
Image Trigger
Datastar Rocket
The Datastar logo representing a lightweight, fast hypermedia framework.
🚀 Fast, lightweight, and powerful for building reactive UIs without the complexity of traditional JavaScript frameworks.
Badge Trigger
Status Details
User is currently online and available for collaboration.
Interactive Element
Add New Item
Choose what type of item you'd like to create.