Skip to main content
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