Popover

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

Example

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

API Reference

It builds on top of Radix-UI Popover

Component	Description
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

Prop	Type	Default	Explanation
`align`	`string`	center	Lets you align the Popover content to the start, center, or end of your trigger element. It's all about perfect positioning.
`arrow`	`boolean`	true	The small, sharp tip pointing back to the trigger. Disable it if you think you don't need it.
`showCloseButton`	`boolean`	true	Want to give users the power to close the Popover? Set this property to true and a close button shall appear.
`side`	`string`	bottom	Specifies the side (top, bottom, left, right) where the Popover pops out relative to the trigger. Tailor it to best fit your layout.
`open`	`boolean`		Control the visibility state of the Popover with this prop. Manage it externally for total control.
`defaultOpen`	`boolean`		If state management isn't your thing, use this to determine whether the Popover starts open.
`onOpenChange`	`function`		A callback function for when the open state changes. Great for managing interactivity and tracking user behavior.
`modal`	`boolean`	true	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

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius