Add a tooltip UI component to your Editor

A small informational popup that appears when hovering over an element.

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add tooltip

Usage

import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/tiptap-ui-primitive/tooltip'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button data-style="ghost">Hover Me</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Tooltip content</p>
      </TooltipContent>
    </Tooltip>
  )
}

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
delayDuration	number	300	Delay before tooltip appears (ms)
skipDelayDuration	number	300	Skip delay when moving between tooltips

TooltipTrigger

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

TooltipContent

Name	Type	Default	Description
side	'top' \| 'right' \| 'bottom' \| 'left'	'top'	Preferred side to display content
align	'start' \| 'center' \| 'end'	'center'	Alignment along the edge