The React component to use as the trigger for the tooltip
Tooltip
A tooltip is a brief, informative message that appears when a user interacts with an element.
Props#
childrenrequired
childrenrequiredReactNodearia-label
aria-labelThe 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
stringarrowPadding
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
booleantruecloseOnEsc
closeOnEscIf true, the tooltip will hide on pressing Esc key
booleantruecloseOnMouseDown
closeOnMouseDownIf true, the tooltip will hide while the mouse is down
@deprecated - use closeOnPointerDown instead
booleancloseOnPointerDown
closeOnPointerDownIf true, the tooltip will hide while the pointer is down
booleancloseOnScroll
closeOnScrollbooleancolorScheme
colorSchemeColor Schemes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
stringdefaultIsOpen
defaultIsOpenIf true, the tooltip will be initially shown
booleandirection
directionTheme direction ltr or rtl. Popper's placement will
be set accordingly
"ltr" | "rtl""ltr"gutter
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
ReactNodemodifiers
modifiersArray of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass. @see Docs https://popper.js.org/docs/v2/modifiers/
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
(() => void)onOpen
onOpenCallback to run when the tooltip shows
(() => void)openDelay
openDelayDelay (in ms) before showing the tooltip
number0msplacement
placementThe placement of the popper relative to its reference.
PlacementWithLogical"bottom"portalProps
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`
booleansize
sizeSizes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
stringvariant
variantVariants for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
stringProps#
childrenrequired
childrenrequiredThe React component to use as the trigger for the tooltip
ReactNodearia-label
aria-labelThe 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
stringarrowPadding
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
booleantruecloseOnEsc
closeOnEscIf true, the tooltip will hide on pressing Esc key
booleantruecloseOnMouseDown
closeOnMouseDownIf true, the tooltip will hide while the mouse is down
@deprecated - use closeOnPointerDown instead
booleancloseOnPointerDown
closeOnPointerDownIf true, the tooltip will hide while the pointer is down
booleancloseOnScroll
closeOnScrollbooleancolorScheme
colorSchemeColor Schemes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
stringdefaultIsOpen
defaultIsOpenIf true, the tooltip will be initially shown
booleandirection
directionTheme direction ltr or rtl. Popper's placement will
be set accordingly
"ltr" | "rtl""ltr"gutter
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
ReactNodemodifiers
modifiersArray of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass. @see Docs https://popper.js.org/docs/v2/modifiers/
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
(() => void)onOpen
onOpenCallback to run when the tooltip shows
(() => void)openDelay
openDelayDelay (in ms) before showing the tooltip
number0msplacement
placementThe placement of the popper relative to its reference.
PlacementWithLogical"bottom"portalProps
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`
booleansize
sizeSizes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
stringvariant
variantVariants for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
string