Tooltip

Preview

Tooltip

TypeScript

Title

⌘+K

Description

Installation

bash

1npx shadcn@latest add https://fysk.dev/r/tooltip.json

Usage

tsx

1import { 
2Tooltip, 
3TooltipContent, 
4TooltipTrigger,
5TooltipHeader,
6TooltipDescription,
7TooltipShortcut 
8} from "@fysk/ui"
9
10<Tooltip>
11  <TooltipTrigger>Hover</TooltipTrigger>
12  <TooltipContent>
13     <TooltipHeader>Search</TooltipHeader>
14     <TooltipDescription>Start searching your files.</TooltipDescription>
15     <TooltipShortcut keys={["⌘", "K"]} />
16  </TooltipContent>
17</Tooltip>

Examples

Default

Standard tooltip with a simple text label.

Component

tsx

Modular Structure

Tooltips with separate header and shortcut components for maximum flexibility.

Component

tsx

Settings

⌘+K

Advanced Controlled State

You can use the open prop to programmatically control the tooltip's visibility. This is useful for onboarding or showing critical hints by default.

Component

tsx

Save in device

⌘+S

You can use the open prop to programmatically control the tooltip's visibility.

Visual Variants

Tooltips come in three distinct aesthetics: default, outline, and the signature glass.

Component

TypeScript

Features

Modular Architecture: Decoupled components for TooltipHeader, TooltipDescription, and TooltipShortcut for granular control.
Minimalist Variants: Focuses on premium fysk aesthetics with default, outline, and glass (frosted) styles.
Optimized Kbd Integration: TooltipShortcut uses the Kbd component with automatic variant-aware color shifts.
Native Radix: Built on top of Radix UI primitives for perfect collision detection and accessibility.

Props

TooltipContent

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Visual style: `default`, `outline`, `glass`.
`size`	`string`	`"md"`	Scale of the tooltip: `sm`, `md`, `lg`.
`showArrow`	`boolean`	`false`	Whether to display the indicator arrow.
`side`	`string`	`"top"`	Preferred side of the tooltip.
`sideOffset`	`number`	`4`	Distance from the trigger in pixels.

Prop	Type	Default	Description
`variant`	`string`	-	Sets the default variant for all child components.
`size`	`string`	-	Sets the default size for all child components.
`delayDuration`	`number`	`200`	The duration from when the mouse enters until it opens.

Accepts all standard props from Radix UI Tooltip primitives.