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 Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- 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
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Built on top of the <Popover /> component. Check it out for more examples.
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/toggle-tooltip.json
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-labelwhen 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.
| 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.