shadcn.io is not affiliated with official shadcn/ui

Shadcn Toggle Tooltip for React and Tailwind

Display information on click.

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

Installation

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

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

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

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

<Step>This component depends on Popover. Install it first if you haven't already.</Step>

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/toggle-tooltip.tsx

"use client";

import { Popover as ArkPopover } from "@ark-ui/react/popover";
import { Portal } from "@ark-ui/react/portal";
import type React from "react";
import { cn } from "@/lib/utils";
import { Popover, PopoverTrigger } from "@/components/ui/popover";

export const ToggleTooltip = (
  props: React.ComponentProps<typeof ArkPopover.Root>
) => {
  const {
    positioning = { placement: "top" },
    lazyMount = true,
    unmountOnExit = true,
    modal = false,
    open: controlledOpen,
    ...rest
  } = props;

  return (
    <Popover
      data-slot="toggle-tooltip"
      lazyMount={lazyMount}
      modal={modal}
      positioning={positioning}
      unmountOnExit={unmountOnExit}
      {...rest}
    />
  );
};

export const ToggleTooltipTrigger = (
  props: React.ComponentProps<typeof ArkPopover.Trigger>
) => <PopoverTrigger data-slot="toggle-tooltip-trigger" {...props} />;

export const ToggleTooltipContent = (
  props: React.ComponentProps<typeof ArkPopover.Content>
) => {
  const { className, children, ...rest } = props;

  return (
    <Portal>
      <ArkPopover.Positioner data-slot="toggle-tooltip-positioner">
        <ArkPopover.Content
          className={cn(
            "z-50 w-fit",
            "px-3 py-1.5",
            "bg-foreground",
            "text-background text-xs",
            "rounded-lg shadow-lg/5",
            "origin-(--transform-origin) animate-in",
            "fade-in-0 zoom-in-[98%]",
            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%]",
            "data-[state=closed]:animate-out",
            "data-[placement=bottom]:slide-in-from-top-2",
            "data-[placement=left]:slide-in-from-end-2",
            "data-[placement=right]:slide-in-from-start-2",
            "data-[placement=top]:slide-in-from-bottom-2",
            "motion-reduce:animate-none!",
            className
          )}
          data-slot="toggle-tooltip-content"
          {...rest}
        >
          {children}
          <ToggleTooltipArrow />
        </ArkPopover.Content>
      </ArkPopover.Positioner>
    </Portal>
  );
};

export const ToggleTooltipArrow = (
  props: React.ComponentProps<typeof ArkPopover.Arrow>
) => {
  const { style, ...rest } = props;

  return (
    <ArkPopover.Arrow
      data-slot="toggle-tooltip-arrow"
      style={
        {
          "--arrow-background": "var(--foreground)",
          "--arrow-size": "calc(1.5 * var(--spacing))",
          ...style,
        } as React.CSSProperties
      }
      {...rest}
    >
      <ArkPopover.ArrowTip />
    </ArkPopover.Arrow>
  );
};

Update the import paths to match your project setup.

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>

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.

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.

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.

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.

Prop	Type	Default
`positioning`	`PositioningOptions`	`{ placement: "top" }`
`modal`	`boolean`	`false`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`open`	`boolean`	-
`onOpenChange`	`(details: OpenChangeDetails) => void`	-

ToggleTooltipTrigger

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

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ToggleTooltipContent

Tooltip content shown in a popover on click.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

ToggleTooltipArrow

Optional arrow pointing to the trigger. Place inside ToggleTooltipContent.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

Attribute	Default
`--arrow-background`	`var(--foreground)`
`--arrow-size`	`calc(1.5 * var(--spacing))`

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

Toggle Group

Tooltip