Tooltip

Tooltip Primitive Text Component

Demo

A pop-up presenting relevant information pertaining to an element whenever the element gains keyboard focus or when the mouse hovers over it.

Installation

CLI

npx @react-native-reusables/cli@latest add tooltip

Manual

Dependencies

Before copy/pasting, add the tooltip primitive and the text component to your project.

Copy/paste the following code to ~/components/ui/tooltip.tsx:

Usage

Caution

Requires a <PortalHost /> as the last child of your <Root/> (app/_layout.tsx) component

import { PortalHost } from '~/components/primitives/portal';

function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}

import * as React from 'react';
import { Platform, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button } from '~/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip';
import { Text } from '~/components/ui/text';

function Example() {
  const [open, setOpen] = React.useState(false);
  const insets = useSafeAreaInsets();
  const contentInsets = {
    top: insets.top,
    bottom: insets.bottom,
    left: 12,
    right: 12,
  };
  return (
    <View className='flex-1 justify-center items-center p-6'>
      <Tooltip open={open} onOpenChange={setOpen} delayDuration={150}>
        <TooltipTrigger asChild>
          <Button variant='outline'>
            <Text>{Platform.OS === 'web' ? 'Hover me' : 'Press me'}</Text>
          </Button>
        </TooltipTrigger>
        <TooltipContent insets={contentInsets}>
          <Text className='native:text-lg'>Add to library</Text>
        </TooltipContent>
      </Tooltip>
    </View>
  );
}

Props

Tooltip

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
open	boolean	(optional)
onOpenChange	(value: boolean) => void	(optional)
defaultOpen	boolean	(optional)
delayDuration	number	Web Only - defaults to 700 (optional)
skipDelayDuration	number	Web Only - defaults to 300 (optional)
disableHoverableContent	boolean	(optional)

TooltipTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

TooltipContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true | undefined	(optional)
alignOffset	number	(optional)
insets	Insets	(optional)
avoidCollisions	boolean	(optional)
align	’start’ | ‘center’ | ‘end’	(optional)
side	’top’ | ‘bottom’	(optional)
sideOffset	number	(optional)
disablePositioningStyle	boolean	Native Only (optional)
collisionBoundary	Element | null | Array<Element | null>	Web Only (optional)
sticky	’partial’ | ‘always’	Web Only (optional)
hideWhenDetached	boolean	Web Only (optional)
onEscapeKeyDown	(ev: Event) => void	Web Only (optional)
onPointerDownOutside	(ev: Event) => void	Web Only (optional)