npm install react-native-tooltipster
# or with yarn
yarn add react-native-tooltipster
Next install CocoaPods deps:
npx pod-install ios
You can show tooltip for any component you want
import Tooltipster from 'react-native-tooltipster';
<Tooltipster
text="Lorem Ipsum ipdoor"
bgColor="#ffbd00"
>
<Text>Hello world</Text>
</Tooltipster>
// Or
<Tooltipster
text="Lorem Ipsum is simply dummy text of the printing and typesetting industry"
bgColor="#ffbd00"
>
<View>
<Text>Hello world</Text>
<Text>It's a good day</Text>
</View>
</Tooltipster>
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:
<Tooltipster
text="Normal size arrow"
bgColor="#8c2f39"
position="left"
arrowPositionRules="ALIGN_BUBBLE"
padding={{
right: Platform.select({
ios: 15,
android: undefined
})
}}
>
Check out example folder for complete usage
- Description: tooltip show animation
- Value: type
SCALE
|FADE
. DefaultSCALE
- Description: size of the arrow of tooltip
- Value: type
number
. Default10
- Description: position of the arrow align to the anchor
- Value: type
top
|right
|bottom
|left
. Defaultbottom
on Android,any
(auto) on iOS
- 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
. DefaultALIGN_ANCHOR
- Description: text of tooltip
- Value: type
string
. Default""
(empty string)
- Description: text alignment
- Value: type
left
|right
|center
. Defaultcenter
- Description: line height of the text
- Value: type
number
. Defaultundefined
- Description: text color
- Value: type
string
. Defaultwhite
- Description: text font size
- Value: type
number
. Default12
on Android,15
on iOS
- Description: text font weight
- Value: type
BOLD
|BOLD_ITALIC
|ITALIC
|NORMAL
. DefaultNORMAL
- Description: tooltip border radius
- Value: type
number
. Default5
- Description: tooltip background
- Value: type
string
. Default#1c7bf6
- Description: tooltip max width
- Value: type
number
. Default<SCREEN_WIDTH>
- Description: padding of the tooltip
- Value: type
{top?: number, right?: number, bottom?: number , left?: number}
. Default{top: 10, right: 10, bottom: 10 , left: 10}
- Description: margin of the tooltip
- Value: type
{top?: number, right?: number, bottom?: number , left?: number}
. Default{top: 1, right: 1, bottom: 1 , left: 1}
- Description: dismiss the tooltip if click on itself
- Value: type
boolean
. Defaultfalse
- Description: React component for the tooltip
- Value: type
Function
. Defaultundefined
Example:
<Tooltipster
bgColor="#7A316F"
animation="FADE"
renderTemplate={() => (
<>
<Text
style={{ color: 'white', fontSize: 20, textAlign: 'center' }}
>
With React Component
</Text>
<Image
source={require('./assets/bunny.jpg')}
style={{
width: 200,
height: 100,
resizeMode: 'stretch',
}}
/>
</>
)}
>
<TouchableOpacity
style={[styles.button, { backgroundColor: '#7A316F' }]}
>
<Icon name={'arrowdown'} size={24} color={'white'} />
</TouchableOpacity>
</Tooltipster>
onClick
: on click bubble (the tooltip)onDismissed
: on tooltip dismissed
Check out example folder for complete usage
- Android Balloon
- Swift EasyTipView
- React native menu: for teaching me how to write better Kotlin code