0
# Trigger Interaction
1

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

4
## Capabilities
5

6
### TooltipTrigger Component
7

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

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

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

25
**Usage Examples:**
26

27
```typescript
28
import { 
29
  TooltipProvider, 
30
  Tooltip, 
31
  TooltipTrigger,
32
  TooltipPortal,
33
  TooltipContent 
34
} from "@radix-ui/react-tooltip";
35

36
// Basic button trigger
37
function BasicTrigger() {
38
  return (
39
    <TooltipProvider>
40
      <Tooltip>
41
        <TooltipTrigger>Hover me</TooltipTrigger>
42
        <TooltipPortal>
43
          <TooltipContent>Tooltip content</TooltipContent>
44
        </TooltipPortal>
45
      </Tooltip>
46
    </TooltipProvider>
47
  );
48
}
49

50
// Using asChild to trigger on custom element
51
function CustomTrigger() {
52
  return (
53
    <TooltipProvider>
54
      <Tooltip>
55
        <TooltipTrigger asChild>
56
          <button className="custom-button">
57
            Custom styled button
58
          </button>
59
        </TooltipTrigger>
60
        <TooltipPortal>
61
          <TooltipContent>Tooltip for custom button</TooltipContent>
62
        </TooltipPortal>
63
      </Tooltip>
64
    </TooltipProvider>
65
  );
66
}
67

68
// Trigger with icon and text
69
function IconTrigger() {
70
  return (
71
    <TooltipProvider>
72
      <Tooltip>
73
        <TooltipTrigger asChild>
74
          <button>
75
            <Icon name="help" />
76
            Help
77
          </button>
78
        </TooltipTrigger>
79
        <TooltipPortal>
80
          <TooltipContent>Get help with this feature</TooltipContent>
81
        </TooltipPortal>
82
      </Tooltip>
83
    </TooltipProvider>
84
  );
85
}
86

87
// Trigger with event handlers
88
function EventHandlerTrigger() {
89
  return (
90
    <TooltipProvider>
91
      <Tooltip>
92
        <TooltipTrigger
93
          onClick={() => console.log("Clicked!")}
94
          onFocus={() => console.log("Focused!")}
95
        >
96
          Interactive trigger
97
        </TooltipTrigger>
98
        <TooltipPortal>
99
          <TooltipContent>Click or focus me</TooltipContent>
100
        </TooltipPortal>
101
      </Tooltip>
102
    </TooltipProvider>
103
  );
104
}
105
```
106

107
### Trigger Props
108

109
#### asChild
110

111
Merges props with child element instead of rendering default button.
112

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

117
#### Standard Button Props
118

119
The trigger accepts all standard HTML button props:
120

121
- **onClick**: `(event: MouseEvent) => void`
122
- **onFocus**: `(event: FocusEvent) => void`
123
- **onBlur**: `(event: FocusEvent) => void`
124
- **onPointerMove**: `(event: PointerEvent) => void`
125
- **onPointerLeave**: `(event: PointerEvent) => void`
126
- **onPointerDown**: `(event: PointerEvent) => void`
127
- **disabled**: `boolean`
128
- **className**: `string`
129
- **style**: `React.CSSProperties`
130
- **All other button attributes**
131

132
### Interaction Behavior
133

134
#### Hover Interactions
135

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

140
#### Focus Interactions
141

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

146
#### Click Interactions
147

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

151
#### Grace Area Behavior
152

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

158
### Accessibility Features
159

160
The trigger automatically handles accessibility:
161

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

168
### Trigger Aliases
169

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

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

176
## Types
177

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

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