shadcn.io is not affiliated with official shadcn/ui

Shadcn Toggle Tooltip for React Radix UI

Display information on click.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Installation

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

Anatomy

ToggleTooltipArrow
└── ToggleTooltipArrowTip
ToggleTooltipAnchor
ToggleTooltipTrigger
ToggleTooltipIndicator
ToggleTooltipContent
└── ToggleTooltipPositioner
ToggleTooltipTitle
ToggleTooltipDescription
ToggleTooltipCloseTrigger

Usage

import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ToggleTooltip,
  ToggleTooltipContent,
  ToggleTooltipTrigger,
} from "@/components/ui/toggle-tooltip";

<ToggleTooltip>
  <ToggleTooltipTrigger asChild>
    <Button aria-label="More information" size="icon-md" variant="outline">
      <InfoIcon />
    </Button>
  </ToggleTooltipTrigger>
  <ToggleTooltipContent className="max-w-52">
    Hover or click to see this content. Works on touch devices too.
  </ToggleTooltipContent>
</ToggleTooltip>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Info Icon

PreviewCode

Side

PreviewCode

With Link

PreviewCode

API Reference

ToggleTooltip

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

children?ReactNode

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

AttributeType

data-slot"toggle-tooltip"

data-scope"popover"

data-part"root"

ToggleTooltipArrow

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

AttributeType

data-slot"toggle-tooltip-arrow"

data-scope"popover"

data-part"arrow"

CSS variableType

--foregroundstring

--spacingstring

ToggleTooltipArrowTip

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

AttributeType

data-scope"popover"

data-part"arrow-tip"

CSS variableType

--foregroundstring

--spacingstring

ToggleTooltipTrigger

button

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

value?string

asChild?boolean

AttributeType

data-slot"toggle-tooltip-trigger"

data-scope"popover"

data-part"trigger"

ToggleTooltipPositioner

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

AttributeType

data-slot"toggle-tooltip-positioner"

data-scope"popover"

data-part"positioner"

CSS variableType

--transform-originstring

ToggleTooltipContent

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

className?string

AttributeType

data-slot"toggle-tooltip-content"

data-scope"popover"

data-part"content"

aria-describedbystring

aria-labelledbystring

data-expanded?string

data-placementstring

data-sidestring

data-state"open" | "closed"

role"dialog"

CSS variableType

--transform-originstring