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/radix/tooltip.json

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

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

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

Install the following dependencies:

bun add radix-ui

npm install radix-ui

pnpm add radix-ui

yarn add radix-ui

Copy and paste the following code into your project.

components/ui/tooltip.tsx

"use client";

import { Tooltip as TooltipPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";

export const TooltipProvider = (
  props: React.ComponentProps<typeof TooltipPrimitive.Provider>
) => {
  const { delayDuration = 0, ...rest } = props;

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

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) → void

children?React.ReactNode

delayDuration?number

disableHoverableContent?boolean

asChild?boolean

AttributeType

data-slot"tooltip"

data-scope"tooltip"

data-part"root"

TooltipTrigger

button

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

delayDuration?number

disableHoverableContent?boolean

asChild?boolean

AttributeType

data-slot"tooltip-trigger"

data-scope"tooltip"

data-part"trigger"

TooltipArrow

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

delayDuration?number

disableHoverableContent?boolean

AttributeType

data-slot"tooltip-arrow"

data-scope"tooltip"

data-part"arrow"

CSS variableType

--radix-tooltip-content-transform-originstring

TooltipContent

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

children?React.ReactNode

delayDuration?number

disableHoverableContent?boolean

forceMount?true

onEscapeKeyDown?DismissableLayerProps["onEscapeKeyDown"]

onPointerDownOutside?DismissableLayerProps["onPointerDownOutside"]

asChild?boolean

className?string

AttributeType

data-slot"tooltip-content"

data-scope"tooltip"

data-part"content"

data-instant?string

data-placementstring

data-sidestring

data-state"open" | "closed"

CSS variableType

--radix-tooltip-content-transform-originstring

TooltipProvider

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) → void

childrenReact.ReactNode

delayDuration?number

disableHoverableContent?boolean

skipDelayDuration?number

asChild?boolean

AttributeType

data-slot"tooltip-provider"

data-scope"tooltip"

data-part"provider"