Tooltip

Wraps a pressable child and toggles a small label bubble above or below it on press. Manages its own open/closed state internally, no controlled props required.

Basic usage

<Tooltip label="This is a tooltip">
  <Button variant="outline" label="Press me" onPress={() => {}} />
</Tooltip>

Placement

<Tooltip label="Above the trigger" placement="top">
  <Button variant="subtle" label="Top" onPress={() => {}} />
</Tooltip>
<Tooltip label="Below the trigger" placement="bottom">
  <Button variant="subtle" label="Bottom" onPress={() => {}} />
</Tooltip>

Custom colors

<Tooltip label="Success message" bg="success" textColor="textInverse">
  <Button variant="solid" label="Custom colors" onPress={() => {}} />
</Tooltip>

Props

Prop	Type	Default	Description
label	string		Required. Text shown inside the tooltip bubble.
children	ReactNode		Required. Pressable trigger element.
placement	'top' | 'bottom'	'top'	Position of the bubble relative to the trigger.
bg	TVajraColors	'text'	Bubble background color.
textColor	TVajraColors	'textInverse'	Bubble text color.
testID	string		Test identifier.