shadcn.io is not affiliated with official shadcn/ui

Shadcn Tooltip for React

Display information on hover or focus.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/tooltip.json

npx shadcn@latest add https://kit.dev/r/base/tooltip.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/tooltip.json

yarn shadcn@latest add https://kit.dev/r/base/tooltip.json

Install the following dependencies:

bun add @base-ui/react

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

Copy and paste the following code into your project.

components/ui/tooltip.tsx

"use client";

import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
import { cn } from "@/lib/utils";

export const TooltipProvider = (props: TooltipPrimitive.Provider.Props) => {
  const { delay = 0, ...rest } = props;

  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delay={delay}
      {...rest}
    />
  );
};

export const Tooltip = (props: TooltipPrimitive.Root.Props) => (

Update the import paths to match your project setup.

Anatomy

TooltipTrigger
TooltipArrow
└── TooltipArrowTip
TooltipContent
└── TooltipPositioner

Usage

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

Accessibility

Key	Description
`Enter`	Activate the focused item.
`Space`	Activate the focused control.

Demos

Sides

Position the tooltip with Ark positioning.placement.

PreviewCode

Keyboard

Tooltip with a keyboard shortcut.

PreviewCode

Disabled

Show a tooltip on a disabled button by wrapping it with a span.

PreviewCode

Rtl

Right-to-left tooltip. See the RTL configuration guide for document direction.

PreviewCode

API Reference

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: TooltipRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<TooltipRoot.Actions | null>

children?React.ReactNode | PayloadChildRenderFunction<Payload>

defaultTriggerId?string | null

disabled?boolean

disableHoverablePopup?boolean

handle?TooltipHandle<Payload>

onOpenChangeComplete?(open: boolean) → void

trackCursorAxis?"none" | "x" | "y" | "both"

triggerId?string | null

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"tooltip"

data-scope"tooltip"

data-part"root"

TooltipTrigger

button

PropType

closeDelay?number

closeOnClick?boolean

delay?number

disabled?boolean

handle?TooltipHandle<Payload>

payload?Payload

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"tooltip-trigger"

data-scope"tooltip"

data-part"trigger"

TooltipArrow

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"tooltip-arrow"

data-scope"tooltip"

data-part"arrow"

TooltipPositioner

div

PropType

side?Side

AttributeType

data-slot"tooltip-positioner"

data-scope"tooltip"

data-part"positioner"

CSS variableType

--transform-originstring

TooltipContent

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"tooltip-content"

data-scope"tooltip"

data-part"popup"

CSS variableType

--transform-originstring

TooltipProvider

PropType

children?React.ReactNode

closeDelay?number

delay?number

timeout?number

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"tooltip-provider"

data-scope"tooltip"

data-part"provider"