Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

<Tooltip title="Add" placement="top">
<Button>Top</Button>
</Tooltip>

Props

PropTypeDefaultDescription
arrowfalseIf true, adds an arrow to the tooltip.
childrenelementTooltip reference element.
classesobjectOverride or extend the styles applied to the component. See CSS API below for more details.
disableFocusListenerboolfalseDo not respond to focus events.
disableHoverListenerboolfalseDo not respond to hover events.
disableTouchListenerboolfalseDo not respond to long press touch events.
enterDelaynumber100The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (enterTouchDelay).
enterNextDelaynumber0The number of milliseconds to wait before showing the tooltip when one was already recently opened.
enterTouchDelaynumber700The number of milliseconds a user must touch the element before showing the tooltip.
idstringThis prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
interactiveboolfalseMakes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the leaveDelay is expired.
leaveDelaynumber0The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (leaveTouchDelay).
leaveTouchDelaynumber1500The number of milliseconds after the user stops touching an element before hiding the tooltip.
onClosefuncCallback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback.
onOpenfuncCallback fired when the component requests to be open. Signature: function(event: object) => void event: The event source of the callback.
openboolIf true, the tooltip is shown.
placement'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start' | 'top'bottomTooltip placement.
PopperComponentelementTypePopperProps applied to the Popper element.
PopperPropsobjectCallback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback.
titlenodeTooltip title. Zero-length titles string are never displayed.
TransitionComponentelementTypeGrowThe component used for the transition.
TransitionPropsobjectProps applied to the Transition element.

Examples

Positioned Tooltips

<Tooltip title="Tooltip" placement="top">
<Button>Top</Button>
</Tooltip>
<Tooltip title="Add" placement="right" style={{ marginLeft: 8 }}>
<Button>Right</Button>
</Tooltip>