# Arrow and Visual Enhancement

The `TooltipArrow` component provides a visual arrow/pointer that connects the tooltip content to its trigger, enhancing the visual relationship and user experience.

## Capabilities

### TooltipArrow Component

Optional arrow component that renders as an SVG element pointing from tooltip content toward the trigger.

```typescript { .api }
/**
 * Arrow/pointer component for tooltips
 * Renders as SVG element that points from content to trigger
 * @param width - Width of arrow in pixels
 * @param height - Height of arrow in pixels
 * @param offset - Offset from content edge in pixels
 */
type TooltipArrowElement = React.ComponentRef<"svg">;
interface TooltipArrowProps extends React.ComponentPropsWithoutRef<"svg"> {
  width?: number;
  height?: number;
  offset?: number;
}

const TooltipArrow: React.forwardRef<TooltipArrowElement, TooltipArrowProps>;
```

**Usage Examples:**

```typescript
import { 
  TooltipProvider, 
  Tooltip, 
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipArrow
} from "@radix-ui/react-tooltip";

// Basic arrow
function BasicArrowTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>
            Tooltip with arrow
            <TooltipArrow />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Custom sized arrow
function CustomArrow() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>
            Large arrow tooltip
            <TooltipArrow width={15} height={10} />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Styled arrow
function StyledArrow() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent className="custom-tooltip">
            Styled tooltip
            <TooltipArrow 
              className="custom-arrow"
              fill="var(--tooltip-background)"
              stroke="var(--tooltip-border)"
              strokeWidth={1}
            />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Arrow with offset
function OffsetArrow() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>
            Arrow with offset
            <TooltipArrow offset={10} />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}
```

### Arrow Props

#### width

Controls the width of the arrow.

- **Type**: `number`
- **Default**: `10` pixels
- **Description**: Width of the arrow SVG element

#### height

Controls the height of the arrow.

- **Type**: `number`
- **Default**: `5` pixels  
- **Description**: Height of the arrow SVG element

#### offset

Controls the offset from the content edge.

- **Type**: `number`
- **Default**: `0` pixels
- **Description**: Distance from content edge where arrow is positioned

#### SVG Props

Arrow accepts all standard SVG props for styling:

- **fill**: `string` - Fill color of the arrow
- **stroke**: `string` - Stroke color of the arrow
- **strokeWidth**: `number` - Width of arrow stroke
- **className**: `string` - CSS class for styling
- **style**: `React.CSSProperties` - Inline styles

### Arrow Positioning

The arrow automatically positions itself based on:

- **Content placement**: Adjusts to content's side relative to trigger
- **Alignment**: Centers along the appropriate axis
- **Collision avoidance**: Repositions when content moves due to collisions
- **Content padding**: Respects `arrowPadding` prop on TooltipContent

### Arrow Styling

#### Default Styling

The arrow renders as a simple filled triangle with:
- Default size: 10px width × 5px height
- Default fill: Inherits from parent or CSS
- No stroke by default

#### Custom Styling

```css
/* Style the arrow */
.custom-arrow {
  fill: #333;
  stroke: #666;
  stroke-width: 1px;
}

/* Style based on tooltip side */
.tooltip-content[data-side="top"] .arrow {
  fill: var(--tooltip-bg-top);
}

.tooltip-content[data-side="bottom"] .arrow {
  fill: var(--tooltip-bg-bottom);
}
```

#### CSS Variables

Arrow inherits CSS custom properties from content:
- `--radix-tooltip-content-transform-origin`
- Tooltip content background colors
- Border colors and styles

### Arrow Behavior

#### Automatic Orientation

Arrow automatically orients based on tooltip placement:
- **Top placement**: Arrow points downward
- **Bottom placement**: Arrow points upward  
- **Left placement**: Arrow points rightward
- **Right placement**: Arrow points leftward

#### Collision Response

When tooltip content repositions due to collisions:
- Arrow updates its orientation to match new placement
- Arrow position adjusts to maintain visual connection
- Arrow respects collision boundaries and padding

#### Accessibility

The arrow is purely decorative and:
- Does not interfere with screen readers
- Is properly hidden from accessibility tree
- Does not affect keyboard navigation

### Arrow Aliases

```typescript { .api }
const Arrow: React.forwardRef<TooltipArrowElement, TooltipArrowProps>;
```

The `Arrow` component is an alias for `TooltipArrow` for shorter import names.

## Types

```typescript { .api }
type TooltipArrowElement = React.ComponentRef<"svg">;

type TooltipArrowProps = React.ComponentPropsWithoutRef<"svg"> & {
  width?: number;
  height?: number;
  offset?: number;
};
```