# Tooltip

## Description

A contextual tooltip component that displays helpful information when users interact with elements. Supports multiple trigger actions (hover, click, follow), positioning options, and customizable styling with arrow indicators for enhanced user experience.

## Aliases

- Tooltip
- Popover
- Hint
- Help Text
- Info Bubble

## Props Breakdown

**Extends:** Standalone interface (no HTML element inheritance)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | - | No | The content displayed inside the tooltip |
| `direction` | `'Top' \| 'Bottom' \| 'Right' \| 'Left'` | `'Top'` | No | Direction where the tooltip appears relative to target |
| `alignment` | `'Start' \| 'End' \| 'Center'` | `'Center'` | No | Alignment of the tooltip relative to the target |
| `action` | `'Click' \| 'Hover' \| 'Follow'` | `'Hover'` | No | Event that triggers tooltip visibility |
| `isVisible` | `boolean` | `false` | No | Whether the tooltip is initially visible |
| `target` | `ReactNode` | - | No | The target element that triggers the tooltip |
| `style` | `'Default' \| 'Outlined'` | `'Default'` | No | Visual style variant of the tooltip |
| `className` | `string` | - | No | Additional CSS class names |

## Examples

### Basic Usage
```tsx
import { Tooltip, Button } from '@delightui/components';

function BasicExample() {
  return (
    <Tooltip 
      target={<Button>Hover me</Button>}
    >
      This is a helpful tooltip message!
    </Tooltip>
  );
}
```

### Tooltip Directions
```tsx
function DirectionsExample() {
  return (
    <div className="tooltip-directions">
      <Tooltip 
        direction="Top"
        target={<Button>Top Tooltip</Button>}
      >
        Tooltip appears above
      </Tooltip>
      
      <Tooltip 
        direction="Bottom"
        target={<Button>Bottom Tooltip</Button>}
      >
        Tooltip appears below
      </Tooltip>
      
      <Tooltip 
        direction="Left"
        target={<Button>Left Tooltip</Button>}
      >
        Tooltip appears to the left
      </Tooltip>
      
      <Tooltip 
        direction="Right"
        target={<Button>Right Tooltip</Button>}
      >
        Tooltip appears to the right
      </Tooltip>
    </div>
  );
}
```

### Tooltip Alignments
```tsx
function AlignmentExample() {
  return (
    <div className="tooltip-alignments">
      <Tooltip 
        direction="Bottom"
        alignment="Start"
        target={<Button>Start Aligned</Button>}
      >
        Aligned to start of target
      </Tooltip>
      
      <Tooltip 
        direction="Bottom"
        alignment="Center"
        target={<Button>Center Aligned</Button>}
      >
        Aligned to center of target
      </Tooltip>
      
      <Tooltip 
        direction="Bottom"
        alignment="End"
        target={<Button>End Aligned</Button>}
      >
        Aligned to end of target
      </Tooltip>
    </div>
  );
}
```

### Trigger Actions
```tsx
function ActionsExample() {
  return (
    <div className="tooltip-actions">
      <Tooltip 
        action="Hover"
        target={<Button>Hover Action</Button>}
      >
        Shows on hover (default)
      </Tooltip>
      
      <Tooltip 
        action="Click"
        target={<Button>Click Action</Button>}
      >
        Shows on click - click again to hide
      </Tooltip>
      
      <Tooltip 
        action="Follow"
        target={<Button>Follow Action</Button>}
      >
        Follows your cursor on hover
      </Tooltip>
    </div>
  );
}
```

### Tooltip Styles
```tsx
function StylesExample() {
  return (
    <div className="tooltip-styles">
      <Tooltip 
        style="Default"
        target={<Button>Default Style</Button>}
      >
        Default tooltip appearance
      </Tooltip>
      
      <Tooltip 
        style="Outlined"
        target={<Button>Outlined Style</Button>}
      >
        Outlined tooltip appearance
      </Tooltip>
    </div>
  );
}
```

### Icon Tooltips
```tsx
import { Icon, Tooltip } from '@delightui/components';

function IconTooltipsExample() {
  return (
    <div className="icon-tooltips">
      <Tooltip 
        target={<Icon icon="Info" />}
        direction="Top"
      >
        Additional information about this feature
      </Tooltip>
      
      <Tooltip 
        target={<Icon icon="Help" />}
        direction="Right"
      >
        Get help with this section
      </Tooltip>
      
      <Tooltip 
        target={<Icon icon="Warning" />}
        direction="Bottom"
        style="Outlined"
      >
        Warning: This action cannot be undone
      </Tooltip>
    </div>
  );
}
```

### Form Field Tooltips
```tsx
import { Tooltip, Input, FormField, Icon } from '@delightui/components';

function FormTooltipsExample() {
  return (
    <div className="form-tooltips">
      <FormField 
        name="email" 
        label={
          <div className="label-with-tooltip">
            Email Address
            <Tooltip 
              target={<Icon icon="Info" size="Small" />}
              direction="Right"
            >
              We'll never share your email with anyone
            </Tooltip>
          </div>
        }
      >
        <Input 
          inputType="Email"
          placeholder="Enter your email"
        />
      </FormField>

      <FormField 
        name="password" 
        label={
          <div className="label-with-tooltip">
            Password
            <Tooltip 
              target={<Icon icon="Help" size="Small" />}
              direction="Top"
            >
              Password must be at least 8 characters long and contain uppercase, lowercase, and numbers
            </Tooltip>
          </div>
        }
      >
        <Input 
          inputType="Password"
          placeholder="Enter password"
        />
      </FormField>
    </div>
  );
}
```

### Rich Content Tooltips
```tsx
function RichContentExample() {
  return (
    <div className="rich-content-tooltips">
      <Tooltip 
        target={<Button>Product Info</Button>}
        direction="Bottom"
        style="Default"
      >
        <div className="tooltip-content">
          <h4>Premium Plan</h4>
          <ul>
            <li>Unlimited projects</li>
            <li>Advanced analytics</li>
            <li>Priority support</li>
          </ul>
          <p><strong>$29/month</strong></p>
        </div>
      </Tooltip>
      
      <Tooltip 
        target={<Button>Status</Button>}
        direction="Right"
      >
        <div className="status-tooltip">
          <Icon icon="Check" style="Filled" />
          <span>All systems operational</span>
        </div>
      </Tooltip>
    </div>
  );
}
```

### Interactive Tooltips
```tsx
function InteractiveExample() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className="interactive-tooltips">
      <Tooltip 
        isVisible={isVisible}
        target={
          <Button onClick={() => setIsVisible(!isVisible)}>
            Toggle Tooltip
          </Button>
        }
      >
        This tooltip is controlled programmatically
      </Tooltip>
      
      <Tooltip 
        action="Click"
        target={<Button>Settings</Button>}
      >
        <div className="interactive-content">
          <p>Quick Settings</p>
          <Button size="Small">Enable notifications</Button>
          <Button size="Small" style="Secondary">
            Change theme
          </Button>
        </div>
      </Tooltip>
    </div>
  );
}
```

### Accessibility Example
```tsx
function AccessibilityExample() {
  return (
    <div className="accessibility-tooltips">
      <Tooltip 
        target={
          <Button 
            aria-describedby="tooltip-1"
            aria-label="Save document with tooltip help"
          >
            Save
          </Button>
        }
      >
        <div id="tooltip-1">
          Save your document to the cloud. 
          Keyboard shortcut: Ctrl+S
        </div>
      </Tooltip>
      
      <Tooltip 
        target={
          <Icon 
            icon="Info" 
            aria-describedby="info-tooltip"
            tabIndex={0}
          />
        }
        action="Click"
      >
        <div id="info-tooltip">
          This feature is available in the premium plan. 
          Upgrade your account to access advanced features.
        </div>
      </Tooltip>
    </div>
  );
}
```

### Custom Styling
```tsx
function CustomStylingExample() {
  return (
    <div className="custom-tooltip-styling">
      <Tooltip 
        target={<Button>Custom Tooltip</Button>}
        className="custom-tooltip-class"
        direction="Top"
      >
        This tooltip has custom styling applied
      </Tooltip>
      
      <Tooltip 
        target={<Button>Error Tooltip</Button>}
        className="error-tooltip"
        style="Outlined"
      >
        <div className="error-content">
          <Icon icon="Error" />
          Something went wrong! Please try again.
        </div>
      </Tooltip>
    </div>
  );
}
```