Tooltip

Feedback

Stablev1.0.0

Displays informative text when users hover over or focus on an element. Built with Ariakit.

Preview

Installation

npx @component-labs/cli add tooltip

This will:
- Install required dependencies
- Copy the Tooltip component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Tooltip } from "@component-labs/ui";

<Tooltip content="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

Props

Name	Type	Default	Description
`content*`	`ReactNode`	`-`	Content to display in the tooltip
`children*`	`ReactNode`	`-`	Element that triggers the tooltip
`variant`	`"default" \| "inverse"`	`"default"`	Visual style variant
`showDelay`	`number`	`700`	Delay before showing tooltip (milliseconds)
`hideDelay`	`number`	`0`	Delay before hiding tooltip (milliseconds)
`placement`	`"top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end"`	`"top"`	Position of the tooltip relative to trigger

Examples

Basic

Simple tooltip on hover

<Tooltip content="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

With Text

Tooltip on text element

<Tooltip content="Additional information">
  <span className="underline cursor-help">Hover for info</span>
</Tooltip>

Different Placements

Tooltip in various positions

<div className="flex gap-4">
  <Tooltip content="Top tooltip" placement="top">
    <Button>Top</Button>
  </Tooltip>

  <Tooltip content="Bottom tooltip" placement="bottom">
    <Button>Bottom</Button>
  </Tooltip>

  <Tooltip content="Left tooltip" placement="left">
    <Button>Left</Button>
  </Tooltip>

  <Tooltip content="Right tooltip" placement="right">
    <Button>Right</Button>
  </Tooltip>
</div>

Inverse Variant

Tooltip with light background

<Tooltip content="Light tooltip" variant="inverse">
  <Button>Hover me</Button>
</Tooltip>

Custom Delays

Tooltip with custom show/hide delays

<Tooltip
  content="Shows instantly, hides after 1s"
  showDelay={0}
  hideDelay={1000}
>
  <Button>Hover me</Button>
</Tooltip>

Rich Content

Tooltip with formatted content

<Tooltip
  content={
    <div>
      <strong>Pro Tip:</strong>
      <br />
      Use keyboard shortcuts for faster navigation
    </div>
  }
>
  <Button>Learn more</Button>
</Tooltip>

With Icon

Tooltip on icon button

import { HelpCircle } from "lucide-react";

<Tooltip content="Get help and support">
  <Button variant="ghost" size="icon">
    <HelpCircle className="h-4 w-4" />
  </Button>
</Tooltip>

Performance

Bundle Size

~2.5KB gzipped

Minified and gzipped

Dependencies

•@ariakit/react
•class-variance-authority
•clsx
•tailwind-merge

Accessibility

•Proper ARIA attributes for tooltips
•Keyboard accessible (focus triggers tooltip)
•Screen reader support
•Respects user motion preferences