Integrate a popover UI component

A popover element that appears when a user clicks on a trigger element.

Install

You can add the primitive via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add popover

Manual Integration

For frameworks other than Vite or Next.js, add the primitive manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

import { Popover, PopoverTrigger, PopoverContent } from '@/components/tiptap-ui-primitive/popover'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button data-style="ghost">Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>Popover content goes here</p>
      </PopoverContent>
    </Popover>
  )
}

Props

Name	Type	Default	Description
open	boolean	undefined	Controlled open state
onOpenChange	(open: boolean) => void	undefined	Callback when open state changes
defaultOpen	boolean	false	Default open state
modal	boolean	false	Whether to render in a modal context

PopoverTrigger

Name	Type	Default	Description
asChild	boolean	false	Whether to merge props with child

PopoverContent

Name	Type	Default	Description
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Preferred side to display content
align	'start' \| 'center' \| 'end'	'center'	Alignment along the edge
portal	boolean	true	Whether to render in a portal