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 i react-native-tooltip-2
import Tooltip from "react-native-tooltip-2";

2. Attach the tooltip to a component.

  content={<Text>Check this out!</Text>}
  onClose={() => setToolTipVisible(false)}>
    onPress={() => setToolTipVisible(true)}>
    <Text>Press me</Text>

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>;


Customizable And Easy-to-use Tooltip For React Native


Add Comment