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 (for Vite or Next.js)

npx @tiptap/cli add tooltip

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 { 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