Customizable And Easy-to-use Tooltip For React Native

An easy-to-use, customizable, pretty clean tooltip component for React Native.

How to use it:

1. Install and import the tooltip component.

# NPM
$ npm i react-native-tooltip-2

import Tooltip from "react-native-tooltip-2";

2. Attach the tooltip to a component.

<Tooltip
  isVisible={toolTipVisible}
  content={<Text>Check this out!</Text>}
  placement={Placement.TOP}
  onClose={() => setToolTipVisible(false)}>
  <Pressable
    style={styles.button}
    onPress={() => setToolTipVisible(true)}>
    <Text>Press me</Text>
  </Pressable>
</Tooltip>

3. Available component props.

isVisible: boolean;
onClose: () => void;
content?: any;
children?: any;
modalComponent?: any;
accessible?: boolean;
topAdjustment?: number;
disableShadow?: boolean;
backgroundColor?: string;
childContentSpacing?: number;
showChildInTooltip?: boolean;
useReactNativeModal?: boolean;
horizontalAdjustment?: number;
allowChildInteraction?: boolean;
useInteractionManager?: boolean;
supportedOrientations?: string[];
closeOnChildInteraction?: boolean;
closeOnContentInteraction?: boolean;
closeOnBackgroundInteraction?: boolean;
arrowSize?: Size; // { width: 16, height: 8 }
placement?: Placement; // top, bottom, left, right, center
displayInsets?: PlacementType; // { top: 24, bottom: 24, left: 24, right: 24 }
style?: StyleProp<ViewStyle>;
contentStyle?: StyleProp<ViewStyle>;
backgroundStyle?: StyleProp<ViewStyle>;
parentWrapperStyle?: StyleProp<ViewStyle>;
childrenWrapperStyle?: StyleProp<ViewStyle>;

Preview:

Download Details:

Author: WrathChaos

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/WrathChaos/react-native-tooltip-2

License: MIT