Skip to content

Commit 13341d5

Browse files
committed
docs: update README.md to include androidOffsetY prop usage and tooltip positioning tips for Android
1 parent 31120ce commit 13341d5

File tree

1 file changed

+29
-8
lines changed

1 file changed

+29
-8
lines changed

README.md

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,15 @@ const App = () => {
7070

7171
The `HighlightToolTip` component accepts the following props:
7272

73-
| Prop | Type | Required | Default | Description |
74-
| ----------------- | ---------------------------- | -------- | ---------------- | --------------------------------------------------- |
75-
| `targetRef` | `React.RefObject` | Yes | - | Reference to the component you want to highlight |
76-
| `children` | `React.ReactNode` | Yes | - | Content to display in the tooltip |
77-
| `onRequestClose` | `() => void` | Yes | - | Function called when the tooltip should be closed |
78-
| `tooltipPosition` | `TooltipPosition` | No | 'bottom' | Position of the tooltip relative to the target |
79-
| `offset` | `{ x?: number; y?: number }` | No | `{ x: 0, y: 0 }` | Offset for tooltip positioning |
80-
| `allowOverlap` | `boolean` | No | `false` | Whether to allow tooltip to overlap with the target |
73+
| Prop | Type | Required | Default | Description |
74+
| ----------------- | ---------------------------- | -------- | ---------------- | ------------------------------------------------------------------- |
75+
| `targetRef` | `React.RefObject` | Yes | - | Reference to the component you want to highlight |
76+
| `children` | `React.ReactNode` | Yes | - | Content to display in the tooltip |
77+
| `onRequestClose` | `() => void` | Yes | - | Function called when the tooltip should be closed |
78+
| `tooltipPosition` | `TooltipPosition` | No | 'bottom' | Position of the tooltip relative to the target |
79+
| `offset` | `{ x?: number; y?: number }` | No | `{ x: 0, y: 0 }` | Offset for tooltip positioning |
80+
| `allowOverlap` | `boolean` | No | `false` | Whether to allow tooltip to overlap with the target |
81+
| `androidOffsetY` | `number` | No | `0` | Y-axis offset applied on Android to correct coordinate misalignment |
8182

8283
### TooltipPosition Types
8384

@@ -125,6 +126,26 @@ You can customize the tooltip's appearance by wrapping your content in a styled
125126
</HighlightToolTip>
126127
```
127128

129+
### Coordinate Measurement Correction (Android)
130+
131+
If you notice that the highlight position is slightly off on Android devices—often due to varying status-bar or navigation-bar heights—you can supply `androidOffsetY` to nudge the measured Y-coordinate.
132+
133+
```jsx
134+
<HighlightToolTip
135+
targetRef={targetRef}
136+
androidOffsetY={-24} // moves the highlight 24px upward on Android
137+
tooltipPosition="bottom"
138+
onRequestClose={() => setShowTooltip(false)}
139+
>
140+
<View style={{ padding: 16, backgroundColor: 'white', borderRadius: 8 }}>
141+
<Text>Perfectly positioned tooltip!</Text>
142+
</View>
143+
</HighlightToolTip>
144+
```
145+
146+
> **Tip**
147+
> Use positive values to push the highlight downward and negative values to pull it upward. On iOS this prop is ignored, so you can safely leave the same code across platforms.
148+
128149
## Contributing
129150

130151
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

0 commit comments

Comments
 (0)