@rn-components-kit/tooltip

Tooltip

English | 中文

Tooltips display infomation when users tap on an element. It supports the following features:

• top and bottom two directions to place tooltip content
• fully customized toopltip content

How to use

npm install @rn-components-kit/tooltip --save

Preview	Code
	Demo1 Code

Props

• style
• popup
• popupContainerStyle
• popupTextStyle
• showCaret
• backgroundColor
• overlayColor
• placement
• onOpen
• onClose

Methods

• open
• close

Reference

Props

style

Allows you to customize style

Type	Required	Default
object	no	-

popup

Content to show when tooltip pressed. If it is a string, it will be wrapped within Text component. You can also pass a customized ReactElement

Type	Required	Default
string | ReactElement	yes	-

popupContainerStyle

Customized style for popup content's container

Type	Required	Default
object	no	-

popupTextStyle

Customized style for popup text (works only when popup is a string)

Type	Required	Default
object	no	-

showCaret

Determines whether to show display pointer

Type	Required	Default
boolean	no	true

backgroundColor

Background color of tooptip (also for caret if showCaret is true)

Type	Required	Default
string	no	'rgba(0,0,0,.8)'

overlayColor

Background color of overlay (you can use rgba to control the opacity)

Type	Required	Default
string	no	'rgba(0,0,0,.1)'

placement

Controls where to show tooltip

Type	Required	Default
enum('top', 'bottom')	no	'bottom'

onOpen

() => void

A callback will be triggered when tooltip opens

Type	Required	Default
function	no	() => {}

onClose

() => void

A callback will be triggered when tooltip closes

Type	Required	Default
function	no	() => {}

Methods

open

open()

Normally, Tooltip component has taken over the work of opening/closing. But in some cases, you can also use this function to open tooltip

close

close()

Normally, Tooltip component has taken over the work of opening/closing. But in some cases, you can also use this function to close tooltip