Tooltip

Contextual tooltip popup

Import: import { Tooltip } from 'react-native-mantine';

Usage

import { Tooltip, Button } from 'react-native-mantine';

const MyComponent = () => {
  return (
    <Tooltip label="Helpful message">
      <Button>Long Press Me</Button>
    </Tooltip>

    // Or with press trigger
    <Tooltip label="Helpful message" trigger="press">
      <Button>Press Me</Button>
    </Tooltip>
  );
};

Props

Prop	Type	Default	Description
`label` (required)	`React.ReactNode`		Tooltip label
`position`	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end'`	`'top'`	Tooltip position relative to target
`color`	`MantineColor`	`'gray'`	Tooltip color from theme
`radius`	`MantineNumberSize`	`'sm'`	Border radius
`multiline`	`boolean`	`false`	If true, tooltip will be multiline
`width`	`number \| 'auto'`	`'auto'`	Tooltip width in multiline mode
`zIndex`	`number`	`1000`	Tooltip z-index
`openDelay`	`number`	`0`	Delay before tooltip opens in ms
`closeDelay`	`number`	`0`	Delay before tooltip closes in ms
`opened`	`boolean`		Controlled opened state
`disabled`	`boolean`	`false`	If true, tooltip will be disabled
`trigger`	`'press' \| 'longPress'`	`'longPress'`	Trigger mode - press or longPress
`withArrow`	`boolean`	`false`	If true, tooltip renders an arrow pointing at the target
`children` (required)	`React.ReactElement`		Target element
`accessibilityLabel`	`string`		Accessibility label for the tooltip content
`style`	`any`		Additional styles
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm