Tooltip

Overview

The Tooltip component provides a flexible way to display contextual information when users hover over or focus on elements. It's designed to offer multiple positioning options, customizable content, and comprehensive accessibility features for enhanced user experience.

Usage

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>This is a helpful tooltip</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Examples

On Hover

Examples showing different tooltip configurations and positioning options.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<Row>
  <Tooltip>
    <TooltipTrigger>
      <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
        Bottom{" "}
        <span>
          <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
        </span>
      </p>
    </TooltipTrigger>
    <TooltipContent className="h-8" side="bottom">
      Content
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
        Top{" "}
        <span>
          <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
        </span>
      </p>
    </TooltipTrigger>
    <TooltipContent className="h-8" side="top">
      Content
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
        Right{" "}
        <span>
          <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
        </span>
      </p>
    </TooltipTrigger>
    <TooltipContent className="h-8" side="right">
      Content
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <p className="inline-flex gap-4 border border-gray-2 px-3 py-1 rounded-lg ">
        Left{" "}
        <span>
          <InfoIcon size={14} className="text-gray-10 self-auto h-full" />
        </span>
      </p>
    </TooltipTrigger>
    <TooltipContent className="h-8" side="left">
      Content
    </TooltipContent>
  </Tooltip>
</Row>

Features

• Multiple Positions: Flexible positioning (top, bottom, left, right, and corners)
• Customizable Content: Rich content support with text, icons, and components
• Accessibility: Full accessibility support with proper ARIA attributes
• Keyboard Navigation: Keyboard support for focus-based tooltips
• Responsive Design: Adapts to different screen sizes and viewports
• Dark Mode Support: Consistent appearance in light and dark themes
• Customizable Styling: Extensive styling options through className props
• Delay Control: Configurable show/hide delays for better UX

Props

TooltipProvider

Tooltip

TooltipTrigger

TooltipContent

Structure

The Tooltip system is composed of several components that work together:

1. TooltipProvider - Context provider for tooltip management
2. Tooltip - The root component that manages tooltip state
3. TooltipTrigger - The element that triggers the tooltip
4. TooltipContent - The actual tooltip content container

Styling

The component includes default styling with:

• Consistent padding and border radius
• Drop shadow for visual separation
• Smooth animations for show/hide
• Dark mode support with appropriate color schemes
• Focus states for accessibility
• Customizable through className props

Custom Styling

You can customize the appearance using className props:

<TooltipContent className="custom-tooltip-class">
  <p>Custom styled tooltip content</p>
</TooltipContent>

Accessibility

The Tooltip component is built with accessibility in mind:

• ARIA Attributes: Proper ARIA labels and descriptions for screen readers
• Keyboard Support: Full keyboard navigation and activation
• Focus Management: Proper focus handling and announcements
• Screen Reader Support: Announces tooltip content appropriately
• High Contrast: Maintains proper contrast ratios
• Semantic HTML: Uses appropriate HTML elements and roles