Integrate a popover UI component

Available for free

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

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add popover

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

PreviouslyMenu

Next upSeparator