rn-lightweight-tooltip

Light-Weight React Native Tooltip

A smooth & cross-platfrom tooltip component for React Native. A light weight library that is highly customisable and can be used without any performance drop. It is a non-modal based solution.

Table of Contents

• Installation
• Quickstart
• Behaviour
• Demo
• Props
• How it works

Installation

npm install rn-lightweight-tooltip

or

yarn add rn-lightweight-tooltip

Quickstart

Enable the Tooltip feature by wrapping your root component with <TooltipProvider> at the App level. Wrap the component for which you want tooltip functionality with <Tooltip>. Pass appropriate props.

import { TooltipProvider, Tooltip } from "rn-lightweight-tooltip";

const App = () => {
  return (
    <TooltipProvider>
      <View>
        <Text>Tooltip example</Text>
        <Tooltip
          popover={<Text> This is a tooltip. Click outside to dismiss.</Text>}
          backgroundColor={"aqua"}
          customContainerStyle={styles.customContainerStyle}
        >
          <Text>Click on me to see tooltip</Text>
        </Tooltip>
      </View>
    </TooltipProvider>
  );
};

export default App;

const styles = StyleSheet.create({
  customContainerStyle: { borderRadius: 10, padding: 5 },
});

Behaviour

If the user will click on the <Text> component, the tooltip will be shown with the given component in popover props. The Tooltip UI can also be modified via customContainerStyle props. Now, if touched anywhere on the screen, the Tooltip will hide.

Demo

Props

Prop Name	Type	Default value	Description
popover	JSX.element	<></>	The tooltip component which is shown when user clicks on the component wrapped under Tooltip.
customContainerStyle	React.ViewStyle	{backgroundColor:white}	The style of the container which covers the popover component
backgroundColor	String	'white'	Background color of the container which covers the popover component
offsetHorizontal	Number	0	Used to adjust the position of the tooltip horizontally. A positive offset will shift the tooltip towards the right
tooltipArrowOffset	Number	25	The distance of the arrow from the left-most end of the popover container
arrowHeight	Number	8	The height of the arrow which points towards the clickable component.
zIndex	Number	999999	The z-Index of the popover component

How it works

When the user clicks on the wrapped component, the absolute position of the component is calculated using React native's measure. An event is triggered which passes this position along with other props to the TooltipProvider component which operates at the app level. Here we render the tooltip at the specified position and detect for any touches on the screen. We dismiss the tooltip whenever any such touch is detected.