arrow | bool | false | If true, adds an arrow to the tooltip. |
children | element | | Tooltip reference element. |
classes | object | | Override or extend the styles applied to the component. See CSS API below for more details. |
disableFocusListener | bool | false | Do not respond to focus events. |
disableHoverListener | bool | false | Do not respond to hover events. |
disableTouchListener | bool | false | Do not respond to long press touch events. |
enterDelay | number | 100 | The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (enterTouchDelay). |
enterNextDelay | number | 0 | The number of milliseconds to wait before showing the tooltip when one was already recently opened. |
enterTouchDelay | number | 700 | The number of milliseconds a user must touch the element before showing the tooltip. |
id | string | | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. |
leaveDelay | number | 0 | The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (leaveTouchDelay). |
leaveTouchDelay | number | 1500 | The number of milliseconds after the user stops touching an element before hiding the tooltip. |
onClose | func | | Callback fired when the component requests to be closed.
Signature:
function(event: object) => void
event: The event source of the callback. |
onOpen | func | | Callback fired when the component requests to be open.
Signature:
function(event: object) => void
event: The event source of the callback. |
open | bool | | If true, the tooltip is shown. |
placement | 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'right-end'
| 'right-start'
| 'top-end'
| 'top-start'
| 'top' | bottom | Tooltip placement. |
PopperComponent | elementType | Popper | Props applied to the Popper element. |
PopperProps | object | | Callback fired when the component requests to be closed.
Signature:
function(event: object) => void
event: The event source of the callback. |
title | node | | Tooltip title. Zero-length titles string are never displayed. |
TransitionComponent | elementType | Grow | The component used for the transition. |
TransitionProps | object | | Props applied to the Transition element. |
componentsProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | The extra props for the slot components. You can override the existing props or add new ones.Deprecated-use the slotProps prop instead. This prop will be removed in v7. |
slotProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the componentsProps prop, which will be deprecated in the future. |
components | { Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType } | {} | The components used for each slot inside.Deprecated-use the slots prop instead. This prop will be removed in v7. |
disableInteractive | bool | false | If true, the tooltip will not be interactive, and does not close when the user hovers over the tooltip before the leaveDelay has expired. |
describeChild | bool | false | Set to true if the title acts as an accessible description. By default the title acts as an accessible label for the child. |
followCursor | bool | false | If true, the tooltip will follow the cursor. |
slots | { arrow?: elementType, popper?: elementType, tooltip?: elementType, transition?: elementType } | {} | The components used for each slot inside. This prop is an alias for the components prop, which will be deprecated in the future. |