@anb98/rn-tooltip

A tooltip for React Native with automatic position selection, viewport clamping, and an arrow that tracks the trigger. No native code, no runtime dependencies.

Quick path

1. Install:

   npm install @anb98/rn-tooltip
   # or
   yarn add @anb98/rn-tooltip
   # or
   pnpm add @anb98/rn-tooltip

   Peer dependencies: react >=18.0.0, react-native >=0.72.0.

2. Use it:

   import { Tooltip } from "@anb98/rn-tooltip";
   import { Text } from "react-native";
   
   function Example() {
     return (
       <Tooltip
         content={
           <Text style={{ color: "white" }}>
             Dark background, arrow, and radius out of the box.
           </Text>
         }
       >
         <Text>Press me</Text>
       </Tooltip>
     );
   }

3. Verify: pressing the trigger opens a modal tooltip near it; pressing outside the tooltip (or the Android back button) closes it.

Full runnable example

Props

Prop	Type	Default	Description
content	ReactNode	required	Tooltip body, rendered inside the modal box.
children	ReactNode	required	The pressable trigger content.
width	number | \${number}%``	200	Fixed pixel width or a percentage of the screen width.
backgroundColor	string	'rgba(0,0,0,0.75)'	Box and arrow fill color.
position	TooltipPosition ('top' | 'bottom' | 'left' | 'right')	auto	Forces a side; when omitted the side with the most room is chosen.
arrowAlignment	ArrowAlignment ('start' | 'center' | 'end')	'center'	Where the arrow (and box) align along the cross axis relative to the trigger.
centerBy	'tooltip' | 'screen'	'tooltip'	Whether the box centers on the trigger or on the screen along the cross axis.
offset	{ x?: number; y?: number }	undefined	Extra gap between trigger and box. Positive always pushes the box farther away; negative pulls it closer.
onChange	(visible: boolean) => void	undefined	Called whenever the tooltip opens or closes.

TooltipRef (via ref):

Method	Description
open()	Opens the tooltip programmatically, same as pressing the trigger.
close()	Closes the tooltip programmatically, same as pressing the overlay.

// From examples/CustomStyle.tsx — styles omitted, see the full file
<Tooltip
  backgroundColor="#4F46E5"
  width="80%"
  content={
    <View style={styles.content}>
      <Text style={styles.title}>Custom style</Text>
      <Text style={styles.body}>
        Brand background color and an 80% width box.
      </Text>
    </View>
  }
>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me</Text>
  </View>
</Tooltip>

Full runnable example

Advanced examples

Explicit position

// From examples/Positions.tsx — styles omitted, see the full file
<Tooltip
  content={<Text style={styles.tooltipBody}>Opens below</Text>}
  position="bottom"
  backgroundColor="#1F2937"
>
  <View style={styles.chip}>
    <Text style={styles.chipText}>Top</Text>
  </View>
</Tooltip>

Full runnable example

Arrow alignment

// From examples/ArrowAlignments.tsx — styles omitted, see the full file
<Tooltip
  content={<Text style={styles.tooltipBody}>Arrow at the start</Text>}
  position="bottom"
  arrowAlignment="start"
  backgroundColor="#1F2937"
>
  <View style={styles.chip}>
    <Text style={styles.chipText}>start</Text>
  </View>
</Tooltip>

Full runnable example

Center by screen

// From examples/CenterByScreen.tsx — styles omitted, see the full file
<Tooltip
  width="90%"
  centerBy="screen"
  position="bottom"
  backgroundColor="#1F2937"
  content={
    <View style={styles.content}>
      <Text style={styles.title}>Screen-centered</Text>
      <Text style={styles.body}>
        The banner centers on the screen while the arrow keeps tracking the
        trigger.
      </Text>
    </View>
  }
>
  <View style={styles.icon}>
    <Text style={styles.iconText}>i</Text>
  </View>
</Tooltip>

Full runnable example

Offset

<Tooltip
  content={<Text>10px farther from the trigger</Text>}
  position="top"
  offset={{ y: 10 }}
>
  <Text>Trigger</Text>
</Tooltip>

Imperative ref

// From examples/RichContent.tsx — styles omitted, see the full file
import { useRef } from 'react'
import { Tooltip, TooltipRef } from '@anb98/rn-tooltip'

const tooltipRef = useRef<TooltipRef>(null)

<Tooltip
  ref={tooltipRef}
  backgroundColor="#1F2937"
  content={
    <View style={styles.content}>
      <Text style={styles.title}>New feature</Text>
      <Text style={styles.body}>Tap here to filter your results.</Text>
      <Pressable style={styles.dismiss} onPress={() => tooltipRef.current?.close()}>
        <Text style={styles.dismissText}>Got it</Text>
      </Pressable>
    </View>
  }
>
  <View style={styles.chip}>
    <Text style={styles.chipText}>Filter</Text>
  </View>
</Tooltip>

Full runnable example

Viewport clamping

When the trigger sits near a screen edge, the box clamps inside the viewport instead of overflowing, and the arrow shifts to keep pointing at the trigger.

Full runnable example

License

MIT © 2026 Abdiel Martinez