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

Toggle Tooltip

Copy Markdown

Display information on click.

DocsAPI

Toggle Tooltip is built on top of the Popover component. Check it out for more examples.

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/toggle-tooltip

Anatomy#

ToggleTooltip
├── ToggleTooltipTrigger
└── ToggleTooltipContent

Usage#

import {
  ToggleTooltip,
  ToggleTooltipContent,
  ToggleTooltipTrigger,
} from "@/components/ui/toggle-tooltip";

<ToggleTooltip>
  <ToggleTooltipTrigger />
  <ToggleTooltipContent>
    Hover or click to see this content.
  </ToggleTooltipContent>
</ToggleTooltip>

Tooltip vs Toggle Tooltip#

You're viewing Toggle Tooltip —a popover that opens on hover or click. Use it when the content is essential and should be accessible to everyone, including touch users and screen readers.

Use 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—no hover required.
• The content may be interactive (links, buttons) since Toggle Tooltip is a popover under the hood.

Toggle Tooltip behavior#

• Touch and keyboard — Opens on click as well as hover, so touch and keyboard users can access the content.
• Screen reader exposure — Content is exposed to assistive technologies.
• Escape to close — Press Escape to dismiss when open.
• Icon-only triggers — Add an aria-label when the trigger is an icon without visible text.

Consider Tooltip when#

• The trigger has its own purpose and the popup is supplementary.
• The content is non-essential —nice-to-have clarity.
• Touch users don't need to access it—tooltips only open on hover/focus.
• The content is short and non-interactive (no links or buttons inside).

Positioning#

Use the positioning prop to change the position.

PreviewCode

lefttopbottomright

API Reference#

ToggleTooltip#

Root component. Combines toggle with tooltip on click.

ToggleTooltipTrigger#

Shows the tooltip on click. Button by default; use asChild for custom elements.

ToggleTooltipContent#

Tooltip content shown in a popover on click.

ToggleTooltipArrow#

Optional arrow pointing to the trigger. Place inside ToggleTooltipContent.

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

[

Previous page

Toggle Group ](/docs/components/toggle-group)[

Next page

Toggle ](/docs/components/toggle)

On This Page

InstallationAnatomyUsageTooltip vs Toggle TooltipUse Toggle Tooltip whenToggle Tooltip behaviorConsider Tooltip whenPositioningAPI ReferenceToggleTooltipToggleTooltipTriggerToggleTooltipContentToggleTooltipArrow