Tooltip

Tooltip for show help messages.

Install

import {Tooltip} from '@xsolla/uikit'

Examples

Form group
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda at atque, culpa laboriosam numquam voluptas!

Example of providing custom React node as tooltip text instead of plain string.

Useful for custom style or utility wrappers
(e.g. FormattedMessage from react-intl)

Usage

<Tooltip label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, pariatur?"/>

API

PropertyDescriptionTypeDefault
positionposition for tooltipbottom, right, left, toptop
labellabel for tooltipReact.Node
offsetoffset for tooltipfalse, left, rightfalse
childrencustom element for tooltipanynull
distancedistance of componentnumber12
arrowshow arrow of tooltipbooltrue
dataIdattribute for data identifierstring
onClickset the onClick handler of tooltip wrapfunc