Popover

More info on demand? Yes, please! With our Popover, it's always a click away

Example

1 import { Popover, Button, Typography, Flex } from '@haktos/sugarcoat-ui';
2
3 <Flex gap='3' direction='column' justify='center'>
4 <Popover trigger={
5 <Button>Quick tip</Button>
6 }>
7 <Flex direction='column' justify='start' items='start' css={{
8 mt: '$3'
9 }}>
10 <Typography.Paragraph>
11 Tip of the day: Use Sugarcoat UI's Flex component for a quick and easy way to handle your layout needs
12 </Typography.Paragraph>
13 </Flex>
14 </Popover>
15 </Flex>
16

API Reference

It builds on top of Radix-UI Popover

ComponentDescription
Popover

Your secret tool for context-based interactivity. Create hoverable or clickable overlays, perfect for user guidance, tooltips, or even simple dropdowns. It’s an excellent assistant that only shows up when needed, and when it does, it surely stands out.

Popover
PropTypeDefaultExplanation
alignstringcenterLets you align the Popover content to the start, center, or end of your trigger element. It's all about perfect positioning.
arrowbooleantrueThe small, sharp tip pointing back to the trigger. Disable it if you think you don't need it.
showCloseButtonbooleantrueWant to give users the power to close the Popover? Set this property to true and a close button shall appear.
sidestringbottomSpecifies the side (top, bottom, left, right) where the Popover pops out relative to the trigger. Tailor it to best fit your layout.
openboolean

Control the visibility state of the Popover with this prop. Manage it externally for total control.

defaultOpenboolean

If state management isn't your thing, use this to determine whether the Popover starts open.

onOpenChangefunction

A callback function for when the open state changes. Great for managing interactivity and tracking user behavior.

modalbooleantrue

Decide whether interaction with outside elements should be enabled or disabled when the Popover is open. It's about keeping the user's focus where you want it.

Note: Besides the above, you can use all the props specified here