Feedback

RnTooltip

A rich tooltip with a title and actions, for React Native content.

iOSkara’s UIKit tooltipAndroidMaterial rich tooltipReact Native tier — renders anywhere

iOSkara’s UIKit tooltip

AndroidMaterial rich tooltip

Import

import {RnTooltip} from '@hzblj/kara-ui'

Props

A rich tooltip — title, message, actions — anchored below a React Native view, and drawn above every sibling. Controlled: it never hides itself. onDismiss reports why it should, and the caller turns visible off. The React Native tier, unlike Tooltip, whose anchor is a native view inside a host.

Prop	Type	Default	Description
children*	ReactElement	—	The anchor — a single React Native view.
onDismiss*	(reason: RnTooltipDismissReason) => void	—	Asks for the tooltip to close, with the reason — turn `visible` off. On Android any touch outside asks, the start of a scroll included; iOS keeps the tooltip through a scroll.
visible*	boolean	—	Shows the tooltip while true. It never hides itself.
actions	RnTooltipAction[]	—	A row of buttons under the text, in order.
actionsAlignment	'end' \| 'start'	'end'	Which end of the bubble the actions sit at. `end` by default.
boundaryInsets	{bottom?: number; top?: number}	—	Insets from the window's top and bottom that the anchor's centre must stay inside — a header or a tab bar over the content. Past them the tooltip asks to be dismissed with `anchorHidden`.
message	string	—	The body text, under the title.
onShown	() => void	—	The appear animation finished.
title	string	—	The heading line, above the message.

children*

ReactElement

The anchor — a single React Native view.

onDismiss*

(reason: RnTooltipDismissReason) => void

Asks for the tooltip to close, with the reason — turn visible off. On Android any touch outside asks, the start of a scroll included; iOS keeps the tooltip through a scroll.

visible*

boolean

Shows the tooltip while true. It never hides itself.

actions

RnTooltipAction[]

A row of buttons under the text, in order.

actionsAlignment'end'

'end' | 'start'

Which end of the bubble the actions sit at. end by default.

boundaryInsets

{bottom?: number; top?: number}

Insets from the window's top and bottom that the anchor's centre must stay inside — a header or a tab bar over the content. Past them the tooltip asks to be dismissed with anchorHidden.

message

string

The body text, under the title.

onShown

() => void

The appear animation finished.

title

string

The heading line, above the message.

Platform notes

Anchored below a React Native view and drawn above every sibling — the anchor needs no host.
iOS keeps it through a scroll; Material dismisses it on any outside touch, the start of a scroll included.