Tooltip

Displays additional information on hover.

Default

Basic usage.

Trigger

Trigger by click.

With Components

Combined with different components.

Custom Content

You can customize the pop-up content.

Types

Different state.

Variant

Special styles.

Placements

There are 12 placement options available.

APIs

Tooltip.Props

AttributeDescriptionTypeAccepted valuesDefault
texttext of pop-upstring React.ReactNode--
visiblevisible or notboolean-false
initialVisiblevisible on initialboolean-false
hideArrowhide arrow iconboolean-false
typepreset style typeTooltipTypes-default
placementposition of the tooltip relative to the targetPlacement-top
triggertooltip trigger mode'click' / 'hover'-hover
enterDelay(ms)delay before tooltip is shownnumber-100
leaveDelay(ms)delay before tooltip is hidden (only work in 'hover' mode)number-150
offset(px)distance between pop-up and targetnumber-12
portalClassNameclassName of pop-up boxstring--
onVisibleChangecall when visibility of the tooltip is changed(visible: boolean) => void--
...native propsHTMLAttributes'id' ...-

TooltipTypes

type TooltipTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'

Placement

type Placement = 'top'
  | 'topStart',
  | 'topEnd',
  | 'left',
  | 'leftStart',
  | 'leftEnd',
  | 'bottom',
  | 'bottomStart',
  | 'bottomEnd',
  | 'right',
  | 'rightStart',
  | 'rightEnd',