React Native Good Tooltip

Tooltips do not interrupt the user's flow. I'm not positive about the flow of using the app after touching the tooltip to close it. So this component doesn't use Modal.

Installation

npm install react-native-good-tooltip

Usage

⚠️Warning⚠️️ This component will need to be used with styles (z-Index and Overflow). You will immediately see the need for zIndex if you use "bottom" placement. Please refer to the example project and video.

import Tooltip from 'react-native-good-tooltip';


// ...

<Tooltip
  visible={true} // or false
  text="This is a tooltip"
  placement={'bottom'}
  anchor={'left'}
>
  {/* your component */}
</Tooltip>

Video

2024-08-29.11.13.47.2.mov

Props

Props

Prop	Type	Default	Description
visible	boolean	undefined	Whether the tooltip is visible.
rerenderKey	any	undefined	Key to force re-rendering of the tooltip.
placement	'top' | 'bottom' | 'left' | 'right'	required	The position of the tooltip relative to the anchor.
anchor	'center' | 'left' | 'right' | 'top' | 'bottom'	'center'	The alignment of the tooltip relative to the anchor.
offset	{ position?: { x?: number, y?: number }, arrow?: { x?: number, y?: number } }	undefined	The offset for the tooltip and arrow position.
arrowElement	React.ReactElement	undefined	Custom arrow element.
styles	{color?: ColorValue | 'primary', containerStyle?: ViewStyle, tooltipStyle?: ViewStyle, arrowSize?: { width?: number, height?: number }, closeSize?: { width?: number, height?: number} }	undefined	Custom styles for the tooltip.
text	string | React.ReactElement	required	The content of the tooltip.
children	React.ReactElement	undefined	The element to which the tooltip is anchored.
onPress	() => void	undefined	Function to call when the tooltip is pressed.
onVisibleChange	(isVisible: boolean) => void	undefined	Function to call when the visibility of the tooltip changes.
delayShowTime	number	0	The delay time before showing the tooltip.
autoHideTime	number	5000	The time after which the tooltip will automatically hide.
disableAutoHide	boolean	false	Whether to disable the auto-hide feature.
disablePressToClose	boolean	false	Whether to disable the press-to-close feature.
numberOfLines	number	2	The number of lines to display in the tooltip text.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library