Logo

Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

Plain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.

Usage

import * as React from 'react';
import { IconButton, Tooltip } from 'react-native-paper';

const MyComponent = () => (
  <Tooltip title="Selected Camera">
    <IconButton icon="camera" selected size={24} onPress={() => {}} />
  </Tooltip>
);

export default MyComponent;

Props

Type: React.ReactElement

Tooltip reference element. Needs to be able to hold a ref.

Type: number
Default value: 500

The number of milliseconds a user must touch the element before showing the tooltip.

Type: number
Default value: 1500

The number of milliseconds after the user stops touching an element before hiding the tooltip.

Type: string

Tooltip title

Type: ThemeProp
Edit this page