Tooltip
Tooltips display informative text when users tap on an element.
Usage#
Web-platform specific note:
You must pass a valid React Native
Modalcomponent implementation intoModalComponentprop becauseModalcomponent is not implemented yet inreact-native-web
...import Modal from 'modal-react-native-web';
...
<Tooltip ModalComponent={Modal} ... />...Props#
Tooltip#
- ModalComponent
- backgroundColor
- closeOnlyOnBackdropPress
- containerStyle
- height
- highlightColor
- onClose
- onOpen
- overlayColor
- pointerColor
- pointerStyle
- popover
- skipAndroidStatusBar
- toggleAction
- toggleOnPress
- visible
- width
- withOverlay
- withPointer
Reference#
Tooltip#
ModalComponent#
Override React Native Modal component (usable for web-platform).
| Type | Default |
|---|---|
| any | None |
backgroundColor#
Sets backgroundColor of the tooltip and pointer.
| Type | Default |
|---|---|
| ColorValue | #617080 |
closeOnlyOnBackdropPress#
Flag to determine whether to disable auto hiding of tooltip when touching/scrolling anywhere inside the active tooltip popover container. When true, Tooltip closes only when overlay backdrop is pressed (or) highlighted tooltip button is pressed.
| Type | Default |
|---|---|
| boolean | false |
containerStyle#
Passes style object to tooltip container
| Type | Default |
|---|---|
| View style(Object) | {} |
height#
Tooltip container height. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.
| Type | Default |
|---|---|
| number | 40 |
highlightColor#
Color to highlight the item the tooltip is surrounding.
| Type | Default |
|---|---|
| ColorValue | transparent |
onClose#
Function which gets called on closing the tooltip.
| Type | Default |
|---|---|
| Function | Function |
onOpen#
Function which gets called on opening the tooltip.
| Type | Default |
|---|---|
| Function | Function |
overlayColor#
Color of overlay shadow when tooltip is open.
| Type | Default |
|---|---|
| ColorValue | #fafafa14 |
pointerColor#
Color of tooltip pointer, it defaults to the backgroundColor if none is passed.
| Type | Default |
|---|---|
| ColorValue | #617080 |
pointerStyle#
Style to be applied on the pointer.
| Type | Default |
|---|---|
| View style(Object) | None |
popover#
Component to be rendered as the display container.
| Type | Default |
|---|---|
| any | None |
skipAndroidStatusBar#
Force skip StatusBar height when calculating element position. Pass true if Tooltip used inside react-native Modal component.
| Type | Default |
|---|---|
| boolean | false |
toggleAction#
Define type of action that should trigger tooltip. Available options onPress, onLongPress
| Type | Default |
|---|---|
| string | onPress |
toggleOnPress#
Flag to determine to toggle or not the tooltip on press.
| Type | Default |
|---|---|
| boolean | true |
visible#
To show the tooltip.
| Type | Default |
|---|---|
| boolean | false |
width#
Tooltip container width. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.
| Type | Default |
|---|---|
| number | 150 |
withOverlay#
Flag to determine whether or not display overlay shadow when tooltip is open.
| Type | Default |
|---|---|
| boolean | true |
withPointer#
Flag to determine whether or not to display the pointer.
| Type | Default |
|---|---|
| boolean | true |