0
# Arrow and Visual Enhancement
1
2
The `TooltipArrow` component provides a visual arrow/pointer that connects the tooltip content to its trigger, enhancing the visual relationship and user experience.
3
4
## Capabilities
5
6
### TooltipArrow Component
7
8
Optional arrow component that renders as an SVG element pointing from tooltip content toward the trigger.
9
10
```typescript { .api }
11
/**
12
* Arrow/pointer component for tooltips
13
* Renders as SVG element that points from content to trigger
14
* @param width - Width of arrow in pixels
15
* @param height - Height of arrow in pixels
16
* @param offset - Offset from content edge in pixels
17
*/
18
type TooltipArrowElement = React.ComponentRef<"svg">;
19
interface TooltipArrowProps extends React.ComponentPropsWithoutRef<"svg"> {
20
width?: number;
21
height?: number;
22
offset?: number;
23
}
24
25
const TooltipArrow: React.forwardRef<TooltipArrowElement, TooltipArrowProps>;
26
```
27
28
**Usage Examples:**
29
30
```typescript
31
import {
32
TooltipProvider,
33
Tooltip,
34
TooltipTrigger,
35
TooltipPortal,
36
TooltipContent,
37
TooltipArrow
38
} from "@radix-ui/react-tooltip";
39
40
// Basic arrow
41
function BasicArrowTooltip() {
42
return (
43
<TooltipProvider>
44
<Tooltip>
45
<TooltipTrigger>Hover me</TooltipTrigger>
46
<TooltipPortal>
47
<TooltipContent>
48
Tooltip with arrow
49
<TooltipArrow />
50
</TooltipContent>
51
</TooltipPortal>
52
</Tooltip>
53
</TooltipProvider>
54
);
55
}
56
57
// Custom sized arrow
58
function CustomArrow() {
59
return (
60
<TooltipProvider>
61
<Tooltip>
62
<TooltipTrigger>Hover me</TooltipTrigger>
63
<TooltipPortal>
64
<TooltipContent>
65
Large arrow tooltip
66
<TooltipArrow width={15} height={10} />
67
</TooltipContent>
68
</TooltipPortal>
69
</Tooltip>
70
</TooltipProvider>
71
);
72
}
73
74
// Styled arrow
75
function StyledArrow() {
76
return (
77
<TooltipProvider>
78
<Tooltip>
79
<TooltipTrigger>Hover me</TooltipTrigger>
80
<TooltipPortal>
81
<TooltipContent className="custom-tooltip">
82
Styled tooltip
83
<TooltipArrow
84
className="custom-arrow"
85
fill="var(--tooltip-background)"
86
stroke="var(--tooltip-border)"
87
strokeWidth={1}
88
/>
89
</TooltipContent>
90
</TooltipPortal>
91
</Tooltip>
92
</TooltipProvider>
93
);
94
}
95
96
// Arrow with offset
97
function OffsetArrow() {
98
return (
99
<TooltipProvider>
100
<Tooltip>
101
<TooltipTrigger>Hover me</TooltipTrigger>
102
<TooltipPortal>
103
<TooltipContent>
104
Arrow with offset
105
<TooltipArrow offset={10} />
106
</TooltipContent>
107
</TooltipPortal>
108
</Tooltip>
109
</TooltipProvider>
110
);
111
}
112
```
113
114
### Arrow Props
115
116
#### width
117
118
Controls the width of the arrow.
119
120
- **Type**: `number`
121
- **Default**: `10` pixels
122
- **Description**: Width of the arrow SVG element
123
124
#### height
125
126
Controls the height of the arrow.
127
128
- **Type**: `number`
129
- **Default**: `5` pixels
130
- **Description**: Height of the arrow SVG element
131
132
#### offset
133
134
Controls the offset from the content edge.
135
136
- **Type**: `number`
137
- **Default**: `0` pixels
138
- **Description**: Distance from content edge where arrow is positioned
139
140
#### SVG Props
141
142
Arrow accepts all standard SVG props for styling:
143
144
- **fill**: `string` - Fill color of the arrow
145
- **stroke**: `string` - Stroke color of the arrow
146
- **strokeWidth**: `number` - Width of arrow stroke
147
- **className**: `string` - CSS class for styling
148
- **style**: `React.CSSProperties` - Inline styles
149
150
### Arrow Positioning
151
152
The arrow automatically positions itself based on:
153
154
- **Content placement**: Adjusts to content's side relative to trigger
155
- **Alignment**: Centers along the appropriate axis
156
- **Collision avoidance**: Repositions when content moves due to collisions
157
- **Content padding**: Respects `arrowPadding` prop on TooltipContent
158
159
### Arrow Styling
160
161
#### Default Styling
162
163
The arrow renders as a simple filled triangle with:
164
- Default size: 10px width × 5px height
165
- Default fill: Inherits from parent or CSS
166
- No stroke by default
167
168
#### Custom Styling
169
170
```css
171
/* Style the arrow */
172
.custom-arrow {
173
fill: #333;
174
stroke: #666;
175
stroke-width: 1px;
176
}
177
178
/* Style based on tooltip side */
179
.tooltip-content[data-side="top"] .arrow {
180
fill: var(--tooltip-bg-top);
181
}
182
183
.tooltip-content[data-side="bottom"] .arrow {
184
fill: var(--tooltip-bg-bottom);
185
}
186
```
187
188
#### CSS Variables
189
190
Arrow inherits CSS custom properties from content:
191
- `--radix-tooltip-content-transform-origin`
192
- Tooltip content background colors
193
- Border colors and styles
194
195
### Arrow Behavior
196
197
#### Automatic Orientation
198
199
Arrow automatically orients based on tooltip placement:
200
- **Top placement**: Arrow points downward
201
- **Bottom placement**: Arrow points upward
202
- **Left placement**: Arrow points rightward
203
- **Right placement**: Arrow points leftward
204
205
#### Collision Response
206
207
When tooltip content repositions due to collisions:
208
- Arrow updates its orientation to match new placement
209
- Arrow position adjusts to maintain visual connection
210
- Arrow respects collision boundaries and padding
211
212
#### Accessibility
213
214
The arrow is purely decorative and:
215
- Does not interfere with screen readers
216
- Is properly hidden from accessibility tree
217
- Does not affect keyboard navigation
218
219
### Arrow Aliases
220
221
```typescript { .api }
222
const Arrow: React.forwardRef<TooltipArrowElement, TooltipArrowProps>;
223
```
224
225
The `Arrow` component is an alias for `TooltipArrow` for shorter import names.
226
227
## Types
228
229
```typescript { .api }
230
type TooltipArrowElement = React.ComponentRef<"svg">;
231
232
type TooltipArrowProps = React.ComponentPropsWithoutRef<"svg"> & {
233
width?: number;
234
height?: number;
235
offset?: number;
236
};
237
```