Tooltip placement and shape
Placement
Section titled “Placement”Each step can prefer a side for its tooltip with placement: 'top', 'bottom', 'left', 'right', or 'auto'. The default is 'bottom'.
{ id: 'avatar', title: 'Your profile', body: 'Tap to edit.', placement: 'bottom' }Whatever you prefer, the resolver keeps the tooltip on screen: it flips to the opposite side when there is no room, shifts along the edge to avoid running off, and respects the safe area (the notch and home indicator) when you pass insets. 'auto' lets the resolver pick the side with the most room.
Spotlight shape
Section titled “Spotlight shape”The cutout around the target is configurable per step with cutout, or globally with the provider’s defaultCutout.
{ id: 'fab', title: 'Create', body: 'Tap +.', cutout: { shape: 'circle', padding: 6 } }| Field | Type | Description |
|---|---|---|
shape |
'rect' | 'rounded' | 'circle' | 'pill' |
The hole shape. |
padding |
number |
Extra space around the target, in px. |
radius |
number |
Corner radius for 'rounded' (default 8). |
The provider default is { shape: 'rounded', padding: 8, radius: 12 }. A per-step cutout is merged over it, so you can change just the shape for one step:
<TourProvider tours={tours} defaultCutout={{ shape: 'rounded', padding: 10 }}> {/* a circular avatar step can still set cutout: { shape: 'circle' } */}</TourProvider>