Tooltip for React Native

Web preview — real device may differ

tsx

import { Text } from "react-native";
import { Button } from "@/component-lib/button";
import { useKitTheme } from "@/component-lib/shared/native";
import { Tooltip } from "@/component-lib/tooltip";
import { Row, Section } from "./layout"; // Section and Row: page layout for the demo
 
function Glyph({ children }: { children: string }) {
  const { tokens } = useKitTheme();
  return <Text style={{ fontSize: 16, color: tokens.fg, fontWeight: "700" }}>{children}</Text>;
}
 
export function TooltipDemo() {
  const { tokens } = useKitTheme();
  return (
    <Section title="Tooltip · long-press">
      <Text style={{ color: tokens.muted }}>Press and hold a button.</Text>
      <Row>
        <Tooltip content="Archive">
          <Button variant="outline" icon={<Glyph>⌂</Glyph>} aria-label="Archive" />
        </Tooltip>
        <Tooltip content="Duplicate this invoice" side="bottom">
          <Button variant="outline" icon={<Glyph>⧉</Glyph>} aria-label="Duplicate" />
        </Tooltip>
        <Tooltip content="Starts on the right" side="right">
          <Button variant="outline">Right</Button>
        </Tooltip>
        <Tooltip content="Never shown" disabled>
          <Button variant="ghost">Disabled tooltip</Button>
        </Tooltip>
      </Row>
    </Section>
  );
}

Install

$ npx @grampro/kit@native add Tooltip

Usage

tsx

import { Tooltip } from "@/component-lib/tooltip";
 
<Tooltip content="Copy invoice number">
  <Button icon={<CopyIcon />} aria-label="Copy" />
</Tooltip>

Props

TooltipProps

Prop	Type	Description
`content` (required)	`ReactNode`	The short label. Keep it to a few words.
`children` (required)	`ReactElement<ChildProps>`	The control it describes: a single pressable element (any Kit button), cloned with a ref, `onLongPress`, `onPressOut` and an accessibility hint.
`side`	`TooltipSide`	Default `top`.
`align`	`TooltipAlign`	Default `center`.
`gap`	`number`	Distance from the control. Default 6.
`delay`	`number`	How long to press before it shows, in ms. Default 400.
`duration`	`number`	How long it stays after the finger lifts, in ms. Default 1500.
`disabled`	`boolean`
`style`	`StyleProp<ViewStyle>`	The bubble's style.
`styles`	`Partial<{ content: StyleProp<ViewStyle>; text: StyleProp<TextStyle> }>`

Native and web

delay is how long to press; duration is how long it stays after the finger lifts.
Web version: Tooltip on the web.