Now Available: Notion-like editor templateNotion-style editor for Tiptap Cloud

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

Popover

NameTypeDefaultDescription
openbooleanundefinedControlled open state
onOpenChange(open: boolean) => voidundefinedCallback when open state changes
defaultOpenbooleanfalseDefault open state
modalbooleanfalseWhether to render in a modal context

PopoverTrigger

NameTypeDefaultDescription
asChildbooleanfalseWhether to merge props with child

PopoverContent

NameTypeDefaultDescription
side'top' | 'right' | 'bottom' | 'left''bottom'Preferred side to display content
align'start' | 'center' | 'end''center'Alignment along the edge
portalbooleantrueWhether to render in a portal