TooltipiOS

Hover/press hint bubble with arrow.

$ npx lumioui add tooltip

import { Tooltip } from "@/components/ui/tooltip/tooltip";

Props7

content	string	Tooltip text shown above the wrapped element.
children	React.ReactNode	Wrapped element; long-press reveals the tooltip.
dismissDelay?	number	Auto-dismiss delay in ms. Default 2000.
className?	string	Extra classes for the tooltip bubble.
side?	"top" \| "bottom"	Preferred side of the trigger. Flips when it doesn't fit. Default "top".
open?	boolean	Controlled visibility. Omit to let long-press + auto-dismiss manage it.
onOpenChange?	(open: boolean) => void

Tooltip — Etaeta.tsx

tooltip/variants/eta.tsx open

Hover/press hint bubble with arrow.

import { TooltipEta } from "@/components/ui/tooltip/variants/eta";

export function Example() {
  return (
    <TooltipEta />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Tooltip } from "../tooltip";
import { Button } from "../../button/button";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** TooltipEta — long-press ETA staged on a live rail trip card. */
export function TooltipEta() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center gap-2">
            <Glass interactive curvature="edge" className="h-8 w-8 items-center justify-center rounded-full">
              <Icon name="clock" size="sm" color="primary" />
            </Glass>
            <View className="flex-1">
              <Text variant="small" className="font-semibold">AP 186 · boarding soon</Text>
              <Text variant="muted" className="text-xs">Coach 3 · seats 12A, 12B · Platform 9</Text>
            </View>
          </View>

          <View className="flex-row gap-2">
            <Tooltip content="Departs 14:32 · arrives Porto-Campanhã 17:07">
              <Button variant="secondary" className="flex-1">Track train</Button>
            </Tooltip>
            <Tooltip content="Call CP assistance — platform 9">
              <Button variant="outline" className="flex-1">Call support</Button>
            </Tooltip>
          </View>

          <Text variant="muted" className="text-xs">Long-press a button for the trip ETA.</Text>
        </Glass>
      </View>
  );
}

Tooltip — Feesfees.tsx

tooltip/variants/fees.tsx open

Hover/press hint bubble with arrow.

import { TooltipFees } from "@/components/ui/tooltip/variants/fees";

export function Example() {
  return (
    <TooltipFees />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Tooltip } from "../tooltip";
import { Button } from "../../button/button";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** TooltipFees — long-press cost breakdown on a transfer button. */
export function TooltipFees() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <Text variant="small" className="font-semibold">Send $4,280.50 instantly</Text>
          <Tooltip content="Instant transfers cost 1.5% — $4,280.50 adds $64.21">
            <Button variant="outline">Transfer fees</Button>
          </Tooltip>
          <Text variant="muted">Arrives in seconds · fee included at confirm</Text>
        </Glass>
      </View>
  );
}