Tooltip

A small popup that provides additional information on hover.

Installation

npm install @cleartrip/ct-design-tooltip
# or
pnpm add @cleartrip/ct-design-tooltip

Peer dependencies

# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native

Usage

Basic

import { Tooltip } from '@cleartrip/ct-design-tooltip';

function Example() {
  return (
    <Tooltip>
      {/* Basic usage */}
    </Tooltip>
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | children | ReactElement | — | ✅ Yes | The content to be displayed inside the tooltip. | | labelContainer | ReactNode | — | ✅ Yes | The container for the label of the tooltip. | | tooltipWidth | number | — | No | Optional width of the tooltip. |

positions

• TOP — top
• RIGHT — right
• BOTTOM — bottom
• LEFT — left
• AUTO — auto

overlayBorderRadius

• XS — xs
• SM — sm
• MD — md
• LG — lg
• XL — xl

HOVER_TYPE

• ENTER — ENTER
• LEAVE — LEAVE

Accessibility

• The component follows accessibility best practices
• Ensure proper ARIA attributes are provided where needed
• Test with screen readers to ensure usability

Migration

If migrating from a previous version:

- import { Tooltip } from 'yagami/core/components';
+ import { Tooltip } from '@cleartrip/ct-design-tooltip';