Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Tooltip

Copy Markdown

Display information on hover or focus.

DocsAPI

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/tooltip

Anatomy#

Tooltip
├── TooltipTrigger
└── TooltipContent

Usage#

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

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

Tooltip vs Toggle Tooltip#

You're viewing Tooltip —a label that shows on hover or focus. Use it when the content is supplementary and non-essential, and you're okay with touch users not having access.

Use Tooltip when#

• The trigger has its own purpose and the popup is supplementary.
• The content is non-essential —nice-to-have clarity for sighted mouse/keyboard users.
• You're okay with touch users not seeing it —tooltips only open on hover/focus, not on tap.
• The content is short and non-interactive (no links or buttons inside).

Tooltip behavior#

• Hover or focus only — Opens on hover/focus; touch users cannot access it.
• Non-interactive — Keep content short with no links or buttons.
• Supplementary — Best for nice-to-have information, not critical content.

Consider Toggle Tooltip when#

• The trigger's primary purpose is to reveal the content.
• The content is essential and should be accessible to touch users and screen readers.
• You need click-to-open so everyone can access it.
• The content may be interactive (links, buttons).

Positioning#

Use the positioning prop to change the position of the tooltip.

PreviewCode

lefttopbottomright

Examples#

With Keyboard Shortcut#

PreviewCode

Add to library

Disabled Button#

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

PreviewCode

Disabled

API Reference#

Tooltip#

Root component that wraps the tooltip. Manages open state and positioning.

TooltipTrigger#

Element that shows the tooltip on hover or focus. Button by default; use asChild for custom elements.

TooltipContent#

Tooltip content shown in a popover on hover or focus.

TooltipArrow#

Optional arrow pointing to the trigger. Place inside TooltipContent.

For a complete list of props, see the Ark UI documentation.

[

Previous page

Toggle ](/docs/components/toggle)[

Next page

Tour ](/docs/components/tour)

On This Page

InstallationAnatomyUsageTooltip vs Toggle TooltipUse Tooltip whenTooltip behaviorConsider Toggle Tooltip whenPositioningExamplesWith Keyboard ShortcutDisabled ButtonAPI ReferenceTooltipTooltipTriggerTooltipContentTooltipArrow