react-native-good-tooltip
v1.2.1
Published
This tooltip was created with the best UX in mind.
Downloads
88
Readme
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
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