InfoTooltip

Overview

The InfoTooltip component provides contextual information and help text for UI elements. It's designed to enhance user experience by offering additional context without cluttering the interface, built on top of the base Tooltip component with enhanced positioning and styling capabilities.

Usage

import { InfoTooltip } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <InfoTooltip
      content="This field is required for account verification"
      position={{ side: "top", align: "center" }}
    >
      <button>Submit</button>
    </InfoTooltip>
  );
}

Examples

Basic Usage

A simple example showing the most common use case.

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

<div className="flex flex-col gap-8 p-4">
    <Row>
      <InfoTooltip content="This is a tooltip on the right">Right Tooltip</InfoTooltip>
      <InfoTooltip content="This is a tooltip on the left" position={{ side: "left" }}>
        Left Tooltip
      </InfoTooltip>
      <InfoTooltip content="This is a tooltip on the top" position={{ side: "top" }}>
        Top Tooltip
      </InfoTooltip>
    </Row>
    <Row>
      <InfoTooltip content="This is a tooltip on the bottom" position={{ side: "bottom" }}>
        Bottom Tooltip
      </InfoTooltip>
      <InfoTooltip
        content="This tooltip has custom alignment"
        position={{
          side: "right",
          align: "start",
          sideOffset: 50,
        }}
      >
        Custom Alignment
      </InfoTooltip>
      <InfoTooltip content="This tooltip is disabled" disabled>
        Disabled Tooltip
      </InfoTooltip>
    </Row>
  </div>

Features

• Customizable Positioning: Control tooltip placement (top, right, bottom, left)
• Alignment Control: Fine-tune alignment (start, center, end)
• Side Offset Adjustment: Precise positioning with pixel-level control
• Disabled State Support: Conditionally disable tooltip functionality
• Child Element Support: Render trigger as child element via asChild prop
• Accessibility: Built-in accessibility support with proper ARIA attributes
• Responsive: Adapts to different screen sizes and viewports
• Customizable: Extensive styling options through className and variant props

Props

Position Configuration

The position prop accepts an object with the following properties:

Default

The standard tooltip appearance with consistent styling.

Custom Styling

Apply custom styles using the variant prop or className for specific design requirements.

Structure

The InfoTooltip is composed of several elements that work together:

1. InfoTooltip - The main container component
2. Trigger Element - The element that activates the tooltip (button, icon, etc.)
3. Tooltip Content - The contextual information displayed
4. Positioning System - Handles tooltip placement and alignment

Styling

The component includes default styling with:

• Consistent spacing and typography
• Dark mode support
• Responsive design
• Customizable through className props
• Focus states for accessibility

Custom Styling

You can customize the appearance using className props:

<InfoTooltip 
  content="Custom styled tooltip"
  className="custom-tooltip-class"
  position={{ side: "bottom", align: "start" }}
>
  <button className="trigger-button">Hover me</button>
</InfoTooltip>

Accessibility

The InfoTooltip component is built with accessibility in mind:

• Keyboard Navigation: Full keyboard support for tooltip activation
• Screen Reader Support: Proper ARIA labels and announcements
• Focus Management: Clear focus indicators and logical tab order
• High Contrast: Maintains proper contrast ratios
• Semantic HTML: Uses appropriate HTML elements and roles
• Timing Control: Configurable delay duration for better UX