This library is a React Native bridge around native tooltips. It allows you to create simple tip views.
Note: Android SDK 27 > is supported
Before we dive into on how to use this library. We would like to thank all the contributor of florent37/ViewTooltip & calm/SexyTooltip libraries for providing such a awesome nice, cool library
import RNTooltips from 'react-native-tooltips';
<RNTooltips text={"Long Press Description"} visible={this.state.visible} reference={this.state.reference} />RNTooltips.Show(
this.state.reference,
{
text: 'Long Press Description'
}
)
| Prop |
Type |
Default |
Note |
text |
string |
|
Text which needs to be displayed |
position: Android |
number |
|
Position of the tooltip view. On iOS it is auto adjustable |
align: Android |
number |
|
Alignment of tooltip |
autoHide |
bool |
|
Should tip view get auto dismiss |
duration |
number |
|
Duration after which tooltip view should be dismissed |
clickToHide: iOS |
bool |
|
On click should tooltip view be dismissed |
corner |
number |
|
Radius of corner |
tintColor |
string |
|
Color of tooltip view background |
textColor |
string |
|
Color of text |
textSize |
number |
|
Size of text displayed |
gravity |
number |
|
Gravity of text |
visible |
bool |
|
Should tooltip be displayed |
shadow |
bool |
|
Shadow on tooltip view |
reference |
object |
|
Reference of react component of which you need tooltip |
onHide |
func |
|
Callback function invoked on tooltip hide |
Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.
This library is provided under the MIT License.
RNTooltips @ Pranav Raj Singh Chauhan
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent