# Tooltip

A small popup that provides additional information on hover.

---

## Installation

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

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
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:

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