Tooltip

Feedback & Status

Tooltip

Popover-based tooltip with arrow pointing to the trigger.

Usage

Explain icon-only actions or clarify abbreviations on hover/focus.

Highlights

• Delay + placement controls
• Keyboard focus friendliness

When to use it

• Icon buttons need accessible labels.
• You must teach new concepts without clutter.

Related components

PopoverIconButton

Examples

Default

Preview (Web)

import { IconButton } from 'react-native-molecules/components/IconButton';
import { Tooltip } from 'react-native-molecules/components/Tooltip';

export default function Example() {
  return (
      <Tooltip>
          <Tooltip.Trigger>
              <IconButton name="star-outline" />
          </Tooltip.Trigger>
          <Tooltip.Content>
              mark as favorite
          </Tooltip.Content>
      </Tooltip>
  );
}

Prop	Type	Default	Description
childrenRequired	ReactNode & (ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[])	—	—
style	((false | "" | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | null) & ViewStyle) | undefined	—	—
showArrow	boolean | undefined	—	—
fadeInDelay	number | undefined	—	—
fadeOutDelay	number | undefined	—	—
hoverableContent	boolean | undefined	—	—

Defined in react-native-molecules/components/Tooltip