Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maitrungduc1410/react-native-tooltipster
💬 Truely native tooltip for your React Native app 💬
https://github.com/maitrungduc1410/react-native-tooltipster
react-native react-native-popover react-native-tooltip react-native-tooltipster
Last synced: 16 days ago
JSON representation
💬 Truely native tooltip for your React Native app 💬
- Host: GitHub
- URL: https://github.com/maitrungduc1410/react-native-tooltipster
- Owner: maitrungduc1410
- License: mit
- Created: 2023-08-03T15:37:29.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-03T16:01:53.000Z (over 1 year ago)
- Last Synced: 2025-01-10T05:39:35.764Z (24 days ago)
- Topics: react-native, react-native-popover, react-native-tooltip, react-native-tooltipster
- Language: TypeScript
- Homepage:
- Size: 9.39 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Tooltipster
💬 Truely native tooltip for your React Native app 💬
## Installation
```sh
npm install react-native-tooltipster
# or with yarn
yarn add react-native-tooltipster
```
Next install CocoaPods deps:
```
npx pod-install ios
```
## Usage
You can show tooltip for any component you want
```tsx
import Tooltipster from 'react-native-tooltipster';
Hello world
// Or
Hello world
It's a good day
```
# Props
First thing to note is, since this tooltip component renders native view, so sometimes you may need some extra codes to handle platform-specific styles (usually happens if tooltip position is `left or right`).
Example:
```tsx
```
Check out [example folder](./example/src/App.tsx) for complete usage
## `animation`
- Description: tooltip show animation
- Value: type `SCALE` | `FADE`. Default `SCALE`
## `arrowSize`
- Description: size of the arrow of tooltip
- Value: type `number`. Default `10`
## `position`
- Description: position of the arrow align to the anchor
- Value: type `top` | `right` | `bottom` | `left`. Default `bottom` on Android, `any` (auto) on iOS
## `arrowPositionRules` (Android only)
- Description: align arrow by Anchor or bubble (the tooltip itself). This is useful in some cases where `position=left|right`
- Value: type `ALIGN_BUBBLE` | `ALIGN_ANCHOR`. Default `ALIGN_ANCHOR`
## `text`
- Description: text of tooltip
- Value: type `string`. Default `""` (empty string)
## `textAlign`
- Description: text alignment
- Value: type `left` | `right` | `center`. Default `center`
## `textLineHeight`
- Description: line height of the text
- Value: type `number`. Default `undefined`
## `textColor`
- Description: text color
- Value: type `string`. Default `white`
## `fontSize`
- Description: text font size
- Value: type `number`. Default `12` on Android, `15` on iOS
## `fontWeight`
- Description: text font weight
- Value: type `BOLD` | `BOLD_ITALIC` | `ITALIC` | `NORMAL`. Default `NORMAL`
## `cornerRadius`
- Description: tooltip border radius
- Value: type `number`. Default `5`
## `bgColor`
- Description: tooltip background
- Value: type `string`. Default `#1c7bf6`
## `maxWidth`
- Description: tooltip max width
- Value: type `number`. Default ``
## `padding`
- Description: padding of the tooltip
- Value: type `{top?: number, right?: number, bottom?: number , left?: number}`. Default `{top: 10, right: 10, bottom: 10 , left: 10}`
## `margin`
- Description: margin of the tooltip
- Value: type `{top?: number, right?: number, bottom?: number , left?: number}`. Default `{top: 1, right: 1, bottom: 1 , left: 1}`
## `dismissOnClick`
- Description: dismiss the tooltip if click on itself
- Value: type `boolean`. Default `false`
## `renderTemplate` (iOS only)
- Description: React component for the tooltip
- Value: type `Function`. Default `undefined`
Example:
```tsx
(
<>
With React Component
>
)}
>
```
# Events
- `onClick`: on click bubble (the tooltip)
- `onDismissed`: on tooltip dismissed
# Examples
Check out [example folder](./example/src/App.tsx) for complete usage
# Thanks
- [Android Balloon](https://github.com/skydoves/Balloon)
- [Swift EasyTipView](https://github.com/teodorpatras/EasyTipView)
- [React native menu](https://github.com/react-native-menu/menu): for teaching me how to write better Kotlin code