Skip to main content
Version: 4.0.0-rc.3

Tooltip

Tooltips display informative text when users tap on an element.

Import

import { Tooltip } from "@rneui/themed";

Usage


Web-platform specific note:

You must pass a valid React Native Modal component implementation into ModalComponent prop because Modal component is not implemented yet in react-native-web

...
import Modal from 'modal-react-native-web';

...

<Tooltip ModalComponent={Modal} ... />
...

Props

NameTypeDefaultDescription
ModalComponenttypeof ComponentOverride React Native Modal component (usable for web-platform).
animationTypenone or fadefade
backgroundColorColorValue#617080Sets backgroundColor of the tooltip and pointer.
closeOnlyOnBackdropPressbooleanfalseFlag 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.
containerStyleView Style{}Passes style object to tooltip container
heightnumber40Tooltip 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.
highlightColorColorValuetransparentColor to highlight the item the tooltip is surrounding.
onCloseFunctionFunctionFunction which gets called on closing the tooltip.
onOpenFunctionFunctionFunction which gets called on opening the tooltip.
overlayColorColorValue#fafafa14Color of overlay shadow when tooltip is open.
pointerColorColorValue#617080Color of tooltip pointer, it defaults to the backgroundColor if none is passed.
pointerStyleView StyleStyle to be applied on the pointer.
popoverReactElement<{}, string or JSXElementConstructor<any>>Component to be rendered as the display container.
skipAndroidStatusBarbooleanfalseForce skip StatusBar height when calculating element position. Pass true if Tooltip used inside react-native Modal component.
toggleActionstringonPressDefine type of action that should trigger tooltip. Available options onPress, onLongPress
toggleOnPressbooleantrueFlag to determine to toggle or not the tooltip on press.
visiblebooleanfalseTo show the tooltip.
widthnumber150Tooltip 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.
withOverlaybooleantrueFlag to determine whether or not display overlay shadow when tooltip is open.
withPointerbooleantrueFlag to determine whether or not to display the pointer.