Tooltip – Once UI

Tooltip draws the bubble a short hint sits in: a label on the surface colour, with an optional icon on either side. Like the web component, it only draws the bubble. To show a hint when an icon is pressed, use InfoTip. See the web Tooltip for the browser version.

Basic usage

Tooltip

import { Tooltip } from "@once-ui-system/native";

export function Copied() {
return <Tooltip label="Copied" prefixIcon="check" />;
}

Positioned by hand

It takes Flex props, so you can place it over other content yourself.

Positioned

import { Column, Tooltip } from "@once-ui-system/native";

export function Hint() {
return (
  <Column position="relative">
    <Tooltip label="Swipe to delete" position="absolute" top="8" right="8" />
  </Column>
);
}

Differences from the web

On the web Tooltip hides itself on screens up to the m breakpoint, where there is no hover. On a phone it always shows.
There is no fade-in animation and no tooltip role, which React Native does not have.
A string label is drawn on one line. Pass an element for anything else.

API reference

Prop	Type	Description
label	ReactNode	The hint. Required.
prefixIcon	IconName	An icon before the label.
suffixIcon	IconName	An icon after the label.
...FlexProps	FlexProps	Spacing, surface and position props, as on Flex.