# Trigger Interaction

The `TooltipTrigger` component handles user interactions that show and hide tooltips. It responds to hover, focus, keyboard events, and touch interactions while maintaining accessibility.

## Capabilities

### TooltipTrigger Component

Interactive trigger element that responds to user interactions to control tooltip visibility.

```typescript { .api }
/**
 * Interactive trigger element for showing/hiding tooltips
 * Extends all standard button element props and event handlers
 * @param children - Content of the trigger element
 * @param asChild - When true, merges props with child element instead of rendering button
 */
type TooltipTriggerElement = React.ComponentRef<"button">;
interface TooltipTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
  asChild?: boolean;
}

const TooltipTrigger: React.forwardRef<TooltipTriggerElement, TooltipTriggerProps>;
```

**Usage Examples:**

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

// Basic button trigger
function BasicTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Tooltip content</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Using asChild to trigger on custom element
function CustomTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button className="custom-button">
            Custom styled button
          </button>
        </TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Tooltip for custom button</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Trigger with icon and text
function IconTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button>
            <Icon name="help" />
            Help
          </button>
        </TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Get help with this feature</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Trigger with event handlers
function EventHandlerTrigger() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          onClick={() => console.log("Clicked!")}
          onFocus={() => console.log("Focused!")}
        >
          Interactive trigger
        </TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>Click or focus me</TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}
```

### Trigger Props

#### asChild

Merges props with child element instead of rendering default button.

- **Type**: `boolean`
- **Default**: `false`
- **Description**: When `true`, trigger props are merged with the child element

#### Standard Button Props

The trigger accepts all standard HTML button props:

- **onClick**: `(event: MouseEvent) => void`
- **onFocus**: `(event: FocusEvent) => void`
- **onBlur**: `(event: FocusEvent) => void`
- **onPointerMove**: `(event: PointerEvent) => void`
- **onPointerLeave**: `(event: PointerEvent) => void`
- **onPointerDown**: `(event: PointerEvent) => void`
- **disabled**: `boolean`
- **className**: `string`
- **style**: `React.CSSProperties`
- **All other button attributes**

### Interaction Behavior

#### Hover Interactions

- **Pointer Enter**: Triggers tooltip opening with delay
- **Pointer Leave**: Triggers tooltip closing or grace period
- **Touch Devices**: Touch interactions are ignored for hover behavior

#### Focus Interactions

- **Focus**: Opens tooltip immediately (no delay)
- **Blur**: Closes tooltip immediately
- **Keyboard Navigation**: Full tab and arrow key support

#### Click Interactions

- **Click**: Closes tooltip if open
- **Pointer Down**: Closes tooltip and prevents focus opening

#### Grace Area Behavior

The trigger participates in grace area calculations:
- When pointer leaves trigger, grace area is created between trigger and content
- If pointer stays within grace area, tooltip remains open
- If pointer exits grace area, tooltip closes

### Accessibility Features

The trigger automatically handles accessibility:

- **aria-describedby**: Set to tooltip content ID when open
- **data-state**: Reflects tooltip state (`closed`, `delayed-open`, `instant-open`)
- **Keyboard support**: Full keyboard navigation
- **Screen reader support**: Proper ARIA relationships
- **Focus management**: Appropriate focus handling

### Trigger Aliases

```typescript { .api }
const Trigger: React.forwardRef<TooltipTriggerElement, TooltipTriggerProps>;
```

The `Trigger` component is an alias for `TooltipTrigger` for shorter import names.

## Types

```typescript { .api }
type TooltipTriggerElement = React.ComponentRef<"button">;

type TooltipTriggerProps = React.ComponentPropsWithoutRef<"button"> & {
  asChild?: boolean;
};
```