# Tooltip

Contextual tooltip on focus or hover

## Installation

  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @termcn/tooltip
```

<Step>Copy and paste the following code into your project.</Step>

```tsx
/* @jsxImportSource @opentui/react */
import type { ReactNode } from "react";

import { useTheme } from "@/components/ui/theme-provider";

export interface TooltipProps {
  children: ReactNode;
  content: string;
  position?: "top" | "bottom" | "left" | "right";
  isVisible?: boolean;
  borderStyle?:
    | "single"
    | "double"
    | "round"
    | "bold"
    | "singleDouble"
    | "doubleSingle"
    | "classic";
  borderColor?: string;
  paddingX?: number;
  paddingY?: number;
  gap?: number;
  arrowDown?: string;
  arrowUp?: string;
}

export const Tooltip = ({
  children,
  content,
  position = "top",
  isVisible = false,
  borderStyle = "single",
  borderColor,
  paddingX = 1,
  paddingY = 0,
  gap = 1,
  arrowDown = "↓",
  arrowUp = "↑",
}: TooltipProps) => {
  const theme = useTheme();
  const resolvedBorderColor = borderColor ?? theme.colors.border;

  const tooltipBox = (
    <box
      borderColor={resolvedBorderColor}
      paddingLeft={paddingX}
      paddingRight={paddingX}
      paddingTop={paddingY}
      paddingBottom={paddingY}
    >
      <text fg={theme.colors.foreground}>{content}</text>
    </box>
  );

  if (!isVisible) {
    return <box>{children}</box>;
  }

  if (position === "top") {
    return (
      <box flexDirection="column" alignItems="flex-start">
        {tooltipBox}
        <text fg={theme.colors.mutedForeground}>{arrowDown}</text>
        <box>{children}</box>
      </box>
    );
  }

  if (position === "bottom") {
    return (
      <box flexDirection="column" alignItems="flex-start">
        <box>{children}</box>
        <text fg={theme.colors.mutedForeground}>{arrowUp}</text>
        {tooltipBox}
      </box>
    );
  }

  if (position === "left") {
    return (
      <box flexDirection="row" alignItems="center">
        {tooltipBox}
        <box>{children}</box>
      </box>
    );
  }

  return (
    <box flexDirection="row" alignItems="center">
      <box>{children}</box>
      {tooltipBox}
    </box>
  );
};
```

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { Tooltip } from "@/components/ui/tooltip";
```

```tsx
<Tooltip content="Save your current progress" position="top" isVisible={true}>
  <Text bold>[S] Save</Text>
</Tooltip>
```

## API Reference

### Tooltip

| Prop          | Type                                                                                         | Default    |
| ------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `children`    | `ReactNode`                                                                                  | `required` |
| `content`     | `string`                                                                                     | `required` |
| `position`    | `"top" \| "bottom" \| "left" \| "right"`                                                     | `"top"`    |
| `isVisible`   | `boolean`                                                                                    | `false`    |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `borderColor` | `string`                                                                                     | -          |
| `paddingX`    | `number`                                                                                     | `1`        |
| `paddingY`    | `number`                                                                                     | `0`        |
| `gap`         | `number`                                                                                     | `1`        |
| `arrowDown`   | `string`                                                                                     | `"↓"`      |
| `arrowUp`     | `string`                                                                                     | `"↑"`      |