Version: 1.2.0

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>

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

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();
}, []);