Tooltip

Tooltip UI Component

Tooltip

API

PropertyDescriptionTypeDefault
alignthis value will be merged into placement's config, please refer to the settings rc-tooltipObject-
arrowPointAtCenterWhether the arrow is pointed at the center of target, supported after antd@1.11+booleanfalse
autoAdjustOverflowWhether to adjust popup placement automatically when popup is off screenbooleantrue
buttonSettings of button displayed in tooltipButtonSettings-
defaultVisibleWhether the floating tooltip card is visible by defaultbooleanfalse
descriptiontooltip description textstring-
getPopupContainerThe DOM container of the tip, the default behavior is to create a div element in body()=>React.HTMLElement() => document.body
iconicon that can be displayed next to titleReact.ReactNodeNotificationsM, orange-500
mouseEnterDelayDelay in seconds, before tooltip is shown on mouse enternumber0.1
mouseLeaveDelayDelay in seconds, before tooltip is hidden on mouse leavenumber0.1
offsetsize of space between trigger and tooltip, you should set small when the you use Icon as a triggerdefault, smalldefault
onVisibleChangeCallback executed when visibility of the tooltip card is changed(visible: boolean) => void-
overlayClassNameClass name of the tooltip cardstring-
overlayStyleStyle of the tooltip cardobject-
placementThe position of the tooltip relative to the target.top / left / right / bottom / topLeft / topRight / bottomLeft / bottomRight / leftTop / leftBottom / rightTop / rightBottomtop
titletooltip title textstring-
triggerTooltip trigger modehover, focus, click, contextMenuhover
tutorialAutoplayWhether to autoplay tutorialbooleanfalse
tutorialAutoplaySpeedspeed of autoplay [ms]number5000
tutorialssteps of tutorialTutorials[]-
typetype of tooltipdefault / icon / largeSimple / largeScrollable / tutorial / avatar / button / header-label / statusdefault
visibleWhether the floating tooltip card is visible or notbooleanfalse
timeToHideAfterClicktime after which tooltip disappears [ms] (value 0 inactivate this functionality)number0
renderrender prop that allows to render custom component as tooltip() => React.ReactNode-

ButtonSettings

PropertyDescriptionTypeDefault
buttonIconIcon of buttonReact.ReactNode-
labelLabel of buttonReact.ReactNode / string-
onClickCallback executed after clicking the button() => void-

Tutorial

PropertyDescriptionTypeDefault
titletitle of tutorial stepstring / React.ReactNode-
descriptiondescription of tutorial stepstring / React.ReactNode-