Tooltip

Displays additional information on hover.

Standard

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 / Schnittstellendokumentation

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 hiddennumber-0
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', 'name', 'className', ...-

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',

Co-Creators