Toggle Tooltip

Installation#

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.

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.