Tooltip

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/tooltip.json

npx shadcn@latest add https://prototyper-ui.com/r/tooltip.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/tooltip.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/tooltip.json

This will add the following files to your project:

components/ui/tooltip.tsx

Usage

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "@/components/ui/tooltip"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>Tooltip text</TooltipContent>
  </Tooltip>
</TooltipProvider>

Anatomy

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

Sub-component	`data-slot`	Purpose	Required
`TooltipProvider`	`tooltip-provider`	Shared delay and configuration for tooltips	Yes
`Tooltip`	`tooltip`	Root provider, manages open/close state	Yes
`TooltipTrigger`	`tooltip-trigger`	Element that triggers the tooltip on hover	Yes
`TooltipContent`	`tooltip-content`	The popup displaying tooltip text	Yes

Examples

Cross Offset

Disabled

Offset

Position

Styling

Data Slots

Use data-slot attributes to target specific parts of the tooltip:

Slot name	Element
`tooltip-provider`	Shared provider (no DOM rendered)
`tooltip`	Root provider (no DOM rendered)
`tooltip-trigger`	The trigger element
`tooltip-content`	The popup panel
`tooltip-arrow`	Arrow element pointing to trigger

Customization Examples

/* Change tooltip background */
[data-slot="tooltip-content"] {
  @apply bg-primary text-primary-foreground;
}

/* Style the tooltip arrow */
[data-slot="tooltip-arrow"] {
  @apply bg-primary fill-primary;
}

{/* Override styles via className */}
<TooltipContent className="bg-destructive text-destructive-foreground">
  This action is destructive
</TooltipContent>

API Reference

TooltipProvider

Shared provider that configures delay and grouping behavior for all child tooltips.

Prop

Type

All Base UI Tooltip.Provider props are forwarded via ...props.

Root component that manages open/close state for a single tooltip.

Prop

Type

All Base UI Tooltip.Root props are forwarded via ...props.

TooltipTrigger

Element that triggers the tooltip on hover and focus.

Prop

Type

All Base UI Tooltip.Trigger props are forwarded via ...props.

TooltipContent

The popup panel displaying the tooltip text, rendered inside a portal with a positioner.

Prop

Type

All Base UI Tooltip.Popup props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Tab`	Moves focus to the trigger, showing the tooltip
`Escape`	Closes the tooltip

ARIA Attributes

TooltipContent receives role="tooltip" via Base UI.
The trigger element receives aria-describedby pointing to the tooltip content.
Tooltips appear on both hover and focus, ensuring keyboard accessibility.
The tooltip includes an arrow element for visual connection to the trigger.
Screen readers announce tooltip content when the trigger receives focus.

Stream UI

This component is available in @prototyperai/stream-ui.

Catalog Definition

tooltip.catalog.ts

import { z } from "zod"
import { defineComponent } from "@prototyperai/stream-ui/catalog"

export default defineComponent({
  description:
    "A tooltip that displays informational text when hovering over its trigger content",
  props: z.object({
    content: z.string().describe("Tooltip text to display on hover"),
  }),
  events: [],
  example: { content: "More information" },
})

Example Spec

{
  "root": "tip",
  "elements": {
    "tip": {
      "type": "Tooltip",
      "props": {
        "content": "More information"
      },
      "children": ["triggerBtn"]
    },
    "triggerBtn": {
      "type": "Button",
      "props": { "label": "Hover me", "variant": "outline" }
    }
  }
}

Learn more in the Stream UI documentation.

On this page