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#
children
required
children
required
ReactNode
aria-label
aria-label
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
string
arrowPadding
arrowPadding
The padding required to prevent the arrow from reaching the very edge of the popper.
number
8
arrowShadowColor
arrowShadowColor
string
arrowSize
arrowSize
number
10
closeDelay
closeDelay
Delay (in ms) before hiding the tooltip
number
0ms
closeOnClick
closeOnClick
If true
, the tooltip will hide on click
boolean
true
closeOnEsc
closeOnEsc
If true
, the tooltip will hide on pressing Esc key
boolean
true
closeOnMouseDown
closeOnMouseDown
If true
, the tooltip will hide while the mouse is down
@deprecated - use closeOnPointerDown
instead
boolean
closeOnPointerDown
closeOnPointerDown
If true
, the tooltip will hide while the pointer is down
boolean
closeOnScroll
closeOnScroll
boolean
colorScheme
colorScheme
Color Schemes for Tooltip
are not implemented in the default theme. You can extend the theme to implement them.
string
defaultIsOpen
defaultIsOpen
If true
, the tooltip will be initially shown
boolean
direction
direction
Theme direction ltr
or rtl
. Popper's placement will
be set accordingly
"ltr" | "rtl"
"ltr"
gutter
gutter
The 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.
number
8
hasArrow
hasArrow
If true
, the tooltip will show an arrow tip
boolean
isDisabled
isDisabled
boolean
isOpen
isOpen
If true
, the tooltip will be shown (in controlled mode)
boolean
label
label
The label of the tooltip
ReactNode
modifiers
modifiers
Array 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
motionProps
HTMLMotionProps<"div">
offset
offset
The main and cross-axis offset to displace popper element from its reference element.
[number, number]
onClose
onClose
Callback to run when the tooltip hides
(() => void)
onOpen
onOpen
Callback to run when the tooltip shows
(() => void)
openDelay
openDelay
Delay (in ms) before showing the tooltip
number
0ms
placement
placement
The placement of the popper relative to its reference.
PlacementWithLogical
"bottom"
portalProps
portalProps
Props to be forwarded to the portal component
Pick<PortalProps, "appendToParentPortal" | "containerRef">
shouldWrapChildren
shouldWrapChildren
If true
, the tooltip will wrap its children
in a `<span/>` with `tabIndex=0`
boolean
size
size
Sizes for Tooltip
are not implemented in the default theme. You can extend the theme to implement them.
string
variant
variant
Variants for Tooltip
are not implemented in the default theme. You can extend the theme to implement them.
string
Props#
children
required
children
required
The React component to use as the trigger for the tooltip
ReactNode
aria-label
aria-label
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
string
arrowPadding
arrowPadding
The padding required to prevent the arrow from reaching the very edge of the popper.
number
8
arrowShadowColor
arrowShadowColor
string
arrowSize
arrowSize
number
10
closeDelay
closeDelay
Delay (in ms) before hiding the tooltip
number
0ms
closeOnClick
closeOnClick
If true
, the tooltip will hide on click
boolean
true
closeOnEsc
closeOnEsc
If true
, the tooltip will hide on pressing Esc key
boolean
true
closeOnMouseDown
closeOnMouseDown
If true
, the tooltip will hide while the mouse is down
@deprecated - use closeOnPointerDown
instead
boolean
closeOnPointerDown
closeOnPointerDown
If true
, the tooltip will hide while the pointer is down
boolean
closeOnScroll
closeOnScroll
boolean
colorScheme
colorScheme
Color Schemes for Tooltip
are not implemented in the default theme. You can extend the theme to implement them.
string
defaultIsOpen
defaultIsOpen
If true
, the tooltip will be initially shown
boolean
direction
direction
Theme direction ltr
or rtl
. Popper's placement will
be set accordingly
"ltr" | "rtl"
"ltr"
gutter
gutter
The 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.
number
8
hasArrow
hasArrow
If true
, the tooltip will show an arrow tip
boolean
isDisabled
isDisabled
boolean
isOpen
isOpen
If true
, the tooltip will be shown (in controlled mode)
boolean
label
label
The label of the tooltip
ReactNode
modifiers
modifiers
Array 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
motionProps
HTMLMotionProps<"div">
offset
offset
The main and cross-axis offset to displace popper element from its reference element.
[number, number]
onClose
onClose
Callback to run when the tooltip hides
(() => void)
onOpen
onOpen
Callback to run when the tooltip shows
(() => void)
openDelay
openDelay
Delay (in ms) before showing the tooltip
number
0ms
placement
placement
The placement of the popper relative to its reference.
PlacementWithLogical
"bottom"
portalProps
portalProps
Props to be forwarded to the portal component
Pick<PortalProps, "appendToParentPortal" | "containerRef">
shouldWrapChildren
shouldWrapChildren
If true
, the tooltip will wrap its children
in a `<span/>` with `tabIndex=0`
boolean
size
size
Sizes for Tooltip
are not implemented in the default theme. You can extend the theme to implement them.
string
variant
variant
Variants for Tooltip
are not implemented in the default theme. You can extend the theme to implement them.
string