animation
Description
The animation of the tooltip.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"Default
'scale'Tooltip
Tooltip is a component that displays short information, such as supplementary details for an element.
Props
TooltipProps
as
Description
The HTML element to render.
Type
keyof ReactDOMboundary
Description
The boundary area for the popper. Used within the preventOverflow modifier.
Type
HTMLElement | "clippingParents" | "scrollParent"Default
'clippingParents'closeDelay
Description
The delay before hiding the tooltip.
Type
numberDefault
0closeOnClick
Description
If true, the tooltip will hide on click.
Type
booleanDefault
falsecloseOnEsc
Description
If true, the tooltip will hide on pressing Esc key.
Type
booleanDefault
truecloseOnMouseDown
Description
If true, the tooltip will hide while the mouse is down.
Type
booleanDefault
falsecloseOnPointerDown
Description
If true, the tooltip will hide while the pointer is down.
Type
booleanDefault
falsecloseOnScroll
Description
If true, the tooltip will hide on scroll.
Type
booleanDefault
falsedefaultIsOpen
DeprecatedDescription
If true, the tooltip will be initially shown.
Deprecated
Use defaultOpen instead.
Type
booleandefaultOpen
Description
If true, the tooltip will be initially shown.
Type
booleandisabled
Description
If true, the tooltip will be disabled.
Type
booleanDefault
falseduration
Description
The animation duration.
Type
number | MotionLifecycleProps<number>eventListeners
Description
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { resize?: boolean | undefined; scroll?: boolean | undefined }Default
trueflip
Description
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
booleanDefault
truegutter
Description
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
Type
UIValue<number>Default
8isDisabled
DeprecatedDescription
If true, the tooltip will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisOpen
DeprecatedDescription
If true, the tooltip will be shown.
Deprecated
Use open instead.
Type
booleanlabel
Description
The label of the tooltip.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortalmatchWidth
Description
If true, the popper will match the width of the reference at all times.
It's useful for autocomplete, date-picker and select patterns.
Type
booleanDefault
falsemodifiers
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]Docs
https://popper.js.org/docs/v2/modifiers/offset
Description
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]onClose
Description
Callback to run when the tooltip hides.
Type
() => voidonOpen
Description
Callback to run when the tooltip shows.
Type
() => voidopen
Description
If true, the tooltip will be shown.
Type
booleanopenDelay
Description
The delay before showing the tooltip.
Type
numberDefault
0placement
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>Default
'bottom'portalProps
Description
Props for portal component.
Type
Pick<PortalProps,
"appendToParentPortal" | "containerRef">preventOverflow
Description
If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
booleanDefault
truestrategy
Description
The CSS positioning strategy to use.
Type
"absolute" | "fixed"Default
'absolute'withPortal
Description
If true, the element will be transported to the end of document.body.
Type
booleanEdit this page on GitHub