Tooltip

A tooltip component that displays additional information when hovering over an element.

Accessible tooltip implementation
Customizable positioning
Support for arrows
Configurable delay
Rich content support

Installation

The Tooltip component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the tooltip in your project.

React TSX
1import {
2  Tooltip,
3  TooltipContent,
4  TooltipProvider,
5  TooltipTrigger,
6} from "@/components/modern-ui/tooltip"

React TSX
1<TooltipProvider>
2  <Tooltip>
3    <TooltipTrigger>Hover me</TooltipTrigger>
4    <TooltipContent>
5      <p>Tooltip content</p>
6    </TooltipContent>
7  </Tooltip>
8</TooltipProvider>

Examples

API Reference

TooltipProvider

Prop	Type	Default	Description
`delayDuration`	`number`	`200`	Delay duration in milliseconds before showing the tooltip
`skipDelayDuration`	`number`	`0`	Delay duration in milliseconds before hiding the tooltip
`disableHoverableContent`	`boolean`	`false`	Whether to disable hoverable content
`children`	`ReactNode`	-	The content to be wrapped

Prop	Type	Default	Description
`defaultOpen`	`boolean`	-	The default open state
`open`	`boolean`	-	The controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes
`children`	`ReactNode`	-	The content to be wrapped

TooltipTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to render as a child element
`children`	`ReactNode`	-	The trigger element

TooltipContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	The preferred side of the trigger to render the tooltip
`sideOffset`	`number`	`0`	The distance in pixels from the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	The preferred alignment against the trigger
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The tooltip content

Tooltip Component