The accessible, human friendly label to use for
screen readers.
If passed, tooltip will show the content label
but expose only `aria-label` to assistive technologies
Tooltip
A tooltip is a brief, informative message that appears when a user interacts with an element.
Props#
aria-label
aria-labelstringarrowPadding
arrowPaddingThe padding required to prevent the arrow from reaching the very edge of the popper.
number8arrowShadowColor
arrowShadowColorstringarrowSize
arrowSizenumber10closeDelay
closeDelayDelay (in ms) before hiding the tooltip
number0mscloseOnClick
closeOnClickIf true, the tooltip will hide on click
booleancloseOnEsc
closeOnEscIf true, the tooltip will hide on pressing Esc key
booleancloseOnMouseDown
closeOnMouseDownIf true, the tooltip will hide while the mouse is down
booleancloseOnPointerDown
closeOnPointerDownIf true, the tooltip will hide while the pointer is down
booleancloseOnScroll
closeOnScrollbooleandefaultIsOpen
defaultIsOpenIf true, the tooltip will be initially shown
booleandirection
directionTheme direction ltr or rtl. Popper's placement will
be set accordingly
"ltr" | "rtl"ltrgutter
gutterThe distance or margin between the reference and popper.
It is used internally to create an offset modifier.
NB: If you define offset prop, it'll override the gutter.
number8hasArrow
hasArrowIf true, the tooltip will show an arrow tip
booleanisDisabled
isDisabledbooleanisOpen
isOpenIf true, the tooltip will be shown (in controlled mode)
booleanlabel
labelThe label of the tooltip
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| ReactFragment
| ReactPortalmodifiers
modifiersArray of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Partial<Modifier<string, any>>[]motionProps
motionPropsHTMLMotionProps<"div">offset
offsetThe main and cross-axis offset to displace popper element from its reference element.
[number, number]onClose
onCloseCallback to run when the tooltip hides
() => voidonOpen
onOpenCallback to run when the tooltip shows
() => voidopenDelay
openDelayDelay (in ms) before showing the tooltip
number0msplacement
placementThe placement of the popper relative to its reference.
PlacementWithLogicalbottomportalProps
portalPropsProps to be forwarded to the portal component
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>shouldWrapChildren
shouldWrapChildrenIf true, the tooltip will wrap its children
in a `<span/>` with `tabIndex=0`
boolean