Tooltip

Tooltips display informative text when users tap on an element.

Usage

Import

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

Theme Key

Tooltip

Example

Loading...

💡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

Name	Type	Default	Description
ModalComponent	typeof Component		Override React Native Modal component (usable for web-platform).
animationType	none | fade	fade
backgroundColor	ColorValue	#617080	Sets backgroundColor of the tooltip and pointer.
closeOnlyOnBackdropPress	boolean	false	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.
containerStyle	View Style	{}	Passes style object to tooltip container
height	number	40	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.
highlightColor	ColorValue	transparent	Color to highlight the item the tooltip is surrounding.
onClose	Function	Function	Function which gets called on closing the tooltip.
onOpen	Function	Function	Function which gets called on opening the tooltip.
overlayColor	ColorValue	#fafafa14	Color of overlay shadow when tooltip is open.
pointerColor	ColorValue	#617080	Color of tooltip pointer, it defaults to the backgroundColor if none is passed.
pointerStyle	View Style		Style to be applied on the pointer.
popover	ReactElement<{}, string | JSXElementConstructor<any>>		Component to be rendered as the display container.
skipAndroidStatusBar	boolean	false	Force skip StatusBar height when calculating element position. Pass true if Tooltip used inside react-native Modal component.
toggleAction	string	onPress	Define type of action that should trigger tooltip. Available options onPress, onLongPress
toggleOnPress	boolean	true	Flag to determine to toggle or not the tooltip on press.
visible	boolean	false	To show the tooltip.
width	number	150	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.
withOverlay	boolean	true	Flag to determine whether or not display overlay shadow when tooltip is open.
withPointer	boolean	true	Flag to determine whether or not to display the pointer.