Version: 2.3.2

Tooltip

Tooltips display informative text when users tap on an element.

tooltip example gif

Usage

import { Tooltip, Text } from 'react-native-elements';
...
<Tooltip popover={<Text>Info here</Text>}>
<Text>Press me</Text>
</Tooltip>

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


Reference

backgroundColor

sets backgroundColor of the tooltip and pointer.

TypeDefault
string#617080

containerStyle

Passes style object to tooltip container

TypeDefault
object (style)inherited styling

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.

TypeDefault
number40

highlightColor

Color to highlight the item the tooltip is surrounding.

TypeDefault
stringtransparent

onClose

function which gets called on closing the tooltip.

TypeDefault
function() => {}

onOpen

function which gets called on opening the tooltip.

TypeDefault
function() => {}

overlayColor

Color of overlay shadow when tooltip is open.

TypeDefault
string'rgba(250, 250, 250, 0.70)'

pointerColor

Color of tooltip pointer, it defaults to the backgroundColor if none is passed .

TypeDefault
stringbackgroundColor

popover

Component to be rendered as the display container.

TypeDefault
React.Elementnull

toggleOnPress

Flag to determine to toggle or not the tooltip on press.

TypeDefault
booleantrue

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.

TypeDefault
number150

withOverlay

Flag to determine whether or not display overlay shadow when tooltip is open.

TypeDefault
booleantrue

withPointer

Flag to determine whether or not to display the pointer.

TypeDefault
booleantrue

toggleAction

Define type of action that should trigger tooltip. Available options onPress, onLongPress

TypeDefault
stringonPress

skipAndroidStatusBar

Force skip StatusBar height when calculating element position. Pass true if Tooltip used inside react-native Modal component.

TypeDefault
booleanfalse

ModalComponent

override React Native Modal component (usable for web-platform)

TypeDefault
React Native ComponentModal

Interaction methods

methoddescription
toggleTooltipToggles tooltip manually. (example)

toggleTooltip example

Store a reference to the Tooltip in your component by using the ref prop provided by React (see docs):

const tooltipRef = useRef(null);
...
<Tooltip
ref={tooltipRef}
...
/>

Then you can manually trigger tooltip from anywhere for example when screen loads:

useEffect(() => {
tooltipRef.current.toggleTooltip();
}, []);

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.
TypeDefault
booleanfalse