Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element.

    SourceTheme source@chakra-ui/tooltip

Props#

aria-label

Description

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

Type
string

arrowPadding

Description

The padding required to prevent the arrow from reaching the very edge of the popper.

Type
number
Default
8

arrowShadowColor

Type
string

arrowSize

Type
number
Default
10

closeDelay

Description

Delay (in ms) before hiding the tooltip

Type
number
Default
0ms

closeOnClick

Description

If true, the tooltip will hide on click

Type
boolean
Default
true

closeOnEsc

Description

If true, the tooltip will hide on pressing Esc key

Type
boolean
Default
true

closeOnMouseDown

Description

If true, the tooltip will hide while the mouse is down

Type
boolean

closeOnPointerDown

Description

If true, the tooltip will hide while the pointer is down

Type
boolean
Default
true

closeOnScroll

Type
boolean
Default
false

defaultIsOpen

Description

If true, the tooltip will be initially shown

Type
boolean
Default
false

direction

Description

Theme direction ltr or rtl. Popper's placement will be set accordingly

Type
"ltr" | "rtl"
Default
ltr

gutter

Description

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.

Type
number
Default
8

hasArrow

Description

If true, the tooltip will show an arrow tip

Type
boolean
Default
false

isDisabled

Type
boolean
Default
false

isOpen

Description

If true, the tooltip will be shown (in controlled mode)

Type
boolean
Default
false

label

Description

The label of the tooltip

Type
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode

modifiers

Description

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

Type
Partial<Modifier<string, any>>[]

motionProps

Type
HTMLMotionProps<"div">

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
() => void

onOpen

Description

Callback to run when the tooltip shows

Type
() => void

openDelay

Description

Delay (in ms) before showing the tooltip

Type
number
Default
0ms

placement

Description

The placement of the popper relative to its reference.

Type
PlacementWithLogical
Default
bottom

portalProps

Description

Props to be forwarded to the portal component

Type
Pick< PortalProps, "appendToParentPortal" | "containerRef" >

shouldWrapChildren

Description

If true, the tooltip will wrap its children in a `<span/>` with `tabIndex=0`

Type
boolean
Default
false

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel