Popover
Popover is a floating container component that provides contextual information positioned relative to a trigger element, such as a button or icon, when a user interacts with it to open the container.Example
Code
Import
Import the component from @faststore/ui
_10import { Popover } from '@faststore/ui'
Import styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/molecules/Popover/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Props
| Name | Type | Description | Default |
|---|---|---|---|
| title | string | The Popover header's title. | |
| content* | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Content of the Popover. | |
| placement | "bottom-start" | "bottom-center" | "bottom-end" | "top-start" | "top-center" | "top-end" | Defines the side or side-alignment (e.g., "bottom-start", "bottom-center") of the Popover. | bottom-start |
| dismissible | false | true | If the Popover can be closed by a button. | false |
| onDismiss | () => void | Called when the Popover is dismissed. | |
| onEntered | () => void | Callback when the Popover is fully rendered and positioned. | |
| closeButtonAriaLabel | string | Close button aria-label. | Close Popover |
| isOpen* | false | true | Controls whether the Popover is open. | |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-popover |
| offsetTop | number | Offset value for top position (e.g.: 12). | 8 |
| offsetLeft | number | Offset value for left position (e.g.: 12). | 0 |
| triggerRef | RefObject<HTMLElement> | Reference to the trigger element that opens the Popover. |
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-popover-margin | 0 var(--fs-spacing-3) |
--fs-popover-padding | var(--fs-spacing-3) var(--fs-spacing-4) var(--fs-spacing-4) |
--fs-popover-border-radius | var(--fs-border-radius) |
--fs-popover-bkg-color | var(--fs-color-body-bkg) |
--fs-popover-box-shadow | var(--fs-shadow-darker) |
--fs-popover-z-index | var(--fs-z-index-top) |
--fs-popover-indicator-size | var(--fs-spacing-1) |
--fs-popover-indicator-distance-edge | var(--fs-spacing-3) |
--fs-popover-indicator-distance-base | var(--fs-spacing-1) |
--fs-popover-indicator-translate | calc(var(--fs-popover-indicator-size) + var(--fs-popover-indicator-distance-base)) |
Customization
For further customization, you can use the following data attributes:
data-fs-popoverdata-fs-popover-headerdata-fs-popover-header-titledata-fs-popover-header-dismiss-buttondata-fs-popover-indicatordata-fs-popover-header-placement="top | top-center | top-start | top-end | bottom | bottom-center | bottom-start | bottom-end"