Popover

The Popover component is a flexible UI element that can be used to display additional information or actions without taking the user away from the current context. It is commonly used for tooltips, dropdowns, and context menus. Uses @floating/ui (opens in a new tab).

Playground

The code in playgrounds is shortened for simplicity.

Explore and experiment with the Popover component using the uncontrolled and controlled playgrounds below:

Uncontrolled Popover

In the uncontrolled variant, the open and close behavior of the Popover is managed internally:

Open

Size

import React from "react"
import { Popover } from "@creation-ui/react"

export const Example = () => <Popover size={"md"} />

Controlled Popover

In the controlled variant, you can manage the open and close behavior of the Popover externally through props:

Closed

Open

Size

import React from "react"
import { Popover } from "@creation-ui/react"

export const Example = () => <Popover size={"md"} />

Full code example

import {
  ClearButton,
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverHeading,
  PopoverTrigger,
  Switch,
} from '@creation-ui/react'
 
export const PopoverExampleUncontrolled = () => {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent className='w-52'>
        <PopoverHeading>Popover</PopoverHeading>
        <PopoverDescription className='pt-2'>
          In the uncontrolled variant, the open and close behavior of the Popover is managed internally.
        </PopoverDescription>
        <br />
        <PopoverClose>Dismiss</PopoverClose>
      </PopoverContent>
    </Popover>
  )
}

Component API

For detailed configuration options, refer to the Popover API in the props table below:

Main wrapper component for the Popover feature.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`size`	`md`	`sm \| md \| lg` Size of the element
`className`	—	`string \| string[]` Class names to add to wrapper component
`initialOpen`	`false`	`boolean` Initial open state
`placement`	—	`Placement` Placement of the popover relative to the trigger element
`modal`	—	`boolean` Whether the popover should be modal
`open`	—	`boolean` State of popover
`onOpenChange`	—	`(open: boolean) => void`

This component is required for uncontrolled approach and is used to trigger the Popover.

Prop	Default	Description
`onClick`	—	`() => void` Callback function called on element click
`asChild`	—	`boolean` Allows the user to pass any element as the anchor
`children`	—	`React.ReactNode` Children to be rendered inside the component
`size`	`md`	`sm \| md \| lg` Size of the element
`className`	—	`string \| string[]` Class names to add to wrapper component

This component is optional and can be used to present popover content.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`size`	`md`	`sm \| md \| lg` Size of the element
`className`	—	`string \| string[]` Class names to add to wrapper component

This component is optional and can be used to provide a heading for the Popover.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`size`	`md`	`sm \| md \| lg` Size of the element
`className`	—	`string \| string[]` Class names to add to wrapper component

This component is optional and can be used to provide additional information about the Popover.

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`size`	`md`	`sm \| md \| lg` Size of the element
`className`	—	`string \| string[]` Class names to add to wrapper component

Closing trigger

Prop	Default	Description
`children`	—	`React.ReactNode` Children to be rendered inside the component
`size`	`md`	`sm \| md \| lg` Size of the element
`className`	—	`string \| string[]` Class names to add to wrapper component

Modal Tooltip