const { classes, disableInteractive, arrow, touch, placement } = ownerState;

const slots = {

popper: ['popper', !disableInteractive && 'popperInteractive', arrow && 'popperArrow'],

tooltip: [

'tooltip',

arrow && 'tooltipArrow',

touch && 'touch',

`tooltipPlacement${capitalize(placement.split('-')[0])}`,

],

arrow: ['arrow'],

};

return composeClasses(slots, getTooltipUtilityClass, classes);

const { ownerState } = props;

return [

styles.popper,

!ownerState.disableInteractive && styles.popperInteractive,

ownerState.arrow && styles.popperArrow,

!ownerState.open && styles.popperClose,

];

const { ownerState } = props;

return [

styles.tooltip,

ownerState.touch && styles.touch,

ownerState.arrow && styles.tooltipArrow,

styles[`tooltipPlacement${capitalize(ownerState.placement.split('-')[0])}`],

];

return (event, ...params) => {

if (eventHandler) {

eventHandler(event, ...params);

}

handler(event, ...params);

};

const props = useDefaultProps({ props: inProps, name: 'MuiTooltip' });

const {

arrow = false,

children: childrenProp,

classes: classesProp,

components = {},

componentsProps = {},

describeChild = false,

disableFocusListener = false,

disableHoverListener = false,

disableInteractive: disableInteractiveProp = false,

disableTouchListener = false,

enterDelay = 100,

enterNextDelay = 0,

enterTouchDelay = 700,

followCursor = false,

id: idProp,

leaveDelay = 0,

leaveTouchDelay = 1500,

onClose,

onOpen,

open: openProp,

placement = 'bottom',

PopperComponent: PopperComponentProp,

PopperProps = {},

slotProps = {},

slots = {},

title,

TransitionComponent: TransitionComponentProp,

TransitionProps,

...other

} = props;

// to prevent runtime errors, developers will need to provide a child as a React element anyway.

const children = React.isValidElement(childrenProp) ? childrenProp : <span>{childrenProp}</span>;

const theme = useTheme();

const isRtl = useRtl();

const [childNode, setChildNode] = React.useState();

const [arrowRef, setArrowRef] = React.useState(null);

const ignoreNonTouchEvents = React.useRef(false);

const disableInteractive = disableInteractiveProp || followCursor;

const closeTimer = useTimeout();

const enterTimer = useTimeout();

const leaveTimer = useTimeout();

const touchTimer = useTimeout();

const [openState, setOpenState] = useControlled({

controlled: openProp,

default: false,

name: 'Tooltip',

state: 'open',

});

let open = openState;

if (process.env.NODE_ENV !== 'production') {

// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler

// eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes

const { current: isControlled } = React.useRef(openProp !== undefined);

// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler

// eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes

React.useEffect(() => {

if (

childNode &&

childNode.disabled &&

!isControlled &&

title !== '' &&

childNode.tagName.toLowerCase() === 'button'

) {

console.warn(

[

'MUI: You are providing a disabled `button` child to the Tooltip component.',

'A disabled element does not fire events.',

"Tooltip needs to listen to the child element's events to display the title.",

'',

'Add a simple wrapper element, such as a `span`.',

].join('\n'),

);

}

}, [title, childNode, isControlled]);

}

const id = useId(idProp);

const prevUserSelect = React.useRef();

const stopTouchInteraction = useEventCallback(() => {

if (prevUserSelect.current !== undefined) {

document.body.style.WebkitUserSelect = prevUserSelect.current;

prevUserSelect.current = undefined;

}

touchTimer.clear();

});

React.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);

const handleOpen = (event) => {

hystersisTimer.clear();

hystersisOpen = true;

// The mouseover event will trigger for every nested element in the tooltip.

// We can skip rerendering when the tooltip is already open.

// We are using the mouseover event instead of the mouseenter event to fix a hide/show issue.

setOpenState(true);

if (onOpen && !open) {

onOpen(event);

}

};

const handleClose = useEventCallback(

/**

(event) => {

hystersisTimer.start(800 + leaveDelay, () => {

hystersisOpen = false;

});

setOpenState(false);

if (onClose && open) {

onClose(event);

}

closeTimer.start(theme.transitions.duration.shortest, () => {

ignoreNonTouchEvents.current = false;

});

},

);

const handleMouseOver = (event) => {

if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {

return;

}

// Remove the title ahead of time.

// We don't want to wait for the next render commit.

// We would risk displaying two tooltips at the same time (native + this one).

if (childNode) {

childNode.removeAttribute('title');

}

enterTimer.clear();

leaveTimer.clear();

if (enterDelay || (hystersisOpen && enterNextDelay)) {

enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {

handleOpen(event);

});

} else {

handleOpen(event);

}

};

const handleMouseLeave = (event) => {

enterTimer.clear();

leaveTimer.start(leaveDelay, () => {

handleClose(event);

});

};

const [, setChildIsFocusVisible] = React.useState(false);

const handleBlur = (event) => {

if (!isFocusVisible(event.target)) {

setChildIsFocusVisible(false);

handleMouseLeave(event);

}

};

const handleFocus = (event) => {

// Workaround for https://github.com/facebook/react/issues/7769

// The autoFocus of React might trigger the event before the componentDidMount.

// We need to account for this eventuality.

if (!childNode) {

setChildNode(event.currentTarget);

}

if (isFocusVisible(event.target)) {

setChildIsFocusVisible(true);

handleMouseOver(event);

}

};

const detectTouchStart = (event) => {

ignoreNonTouchEvents.current = true;

const childrenProps = children.props;

if (childrenProps.onTouchStart) {

childrenProps.onTouchStart(event);

}

};

const handleTouchStart = (event) => {

detectTouchStart(event);

leaveTimer.clear();

closeTimer.clear();

stopTouchInteraction();

prevUserSelect.current = document.body.style.WebkitUserSelect;

// Prevent iOS text selection on long-tap.

document.body.style.WebkitUserSelect = 'none';

touchTimer.start(enterTouchDelay, () => {

document.body.style.WebkitUserSelect = prevUserSelect.current;

handleMouseOver(event);

});

};

const handleTouchEnd = (event) => {

if (children.props.onTouchEnd) {

children.props.onTouchEnd(event);

}

stopTouchInteraction();

leaveTimer.start(leaveTouchDelay, () => {

handleClose(event);

});

};

React.useEffect(() => {

if (!open) {

return undefined;

}

/**

function handleKeyDown(nativeEvent) {

if (nativeEvent.key === 'Escape') {

handleClose(nativeEvent);

}

}

document.addEventListener('keydown', handleKeyDown);

return () => {

document.removeEventListener('keydown', handleKeyDown);

};

}, [handleClose, open]);

const handleRef = useForkRef(getReactElementRef(children), setChildNode, ref);

// There is no point in displaying an empty tooltip.

// So we exclude all falsy values, except 0, which is valid.

if (!title && title !== 0) {

open = false;

}

const popperRef = React.useRef();

const handleMouseMove = (event) => {

const childrenProps = children.props;

if (childrenProps.onMouseMove) {

childrenProps.onMouseMove(event);

}

cursorPosition = { x: event.clientX, y: event.clientY };

if (popperRef.current) {

popperRef.current.update();

}

};

const nameOrDescProps = {};

const titleIsString = typeof title === 'string';

if (describeChild) {

nameOrDescProps.title = !open && titleIsString && !disableHoverListener ? title : null;

nameOrDescProps['aria-describedby'] = open ? id : null;

} else {

nameOrDescProps['aria-label'] = titleIsString ? title : null;

nameOrDescProps['aria-labelledby'] = open && !titleIsString ? id : null;

}

const childrenProps = {

...nameOrDescProps,

...other,

...children.props,

className: clsx(other.className, children.props.className),

onTouchStart: detectTouchStart,

ref: handleRef,

...(followCursor ? { onMouseMove: handleMouseMove } : {}),

};

if (process.env.NODE_ENV !== 'production') {

childrenProps['data-mui-internal-clone-element'] = true;

// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler

// eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes

React.useEffect(() => {

if (childNode && !childNode.getAttribute('data-mui-internal-clone-element')) {

console.error(

[

'MUI: The `children` component of the Tooltip is not forwarding its props correctly.',

'Please make sure that props are spread on the same element that the ref is applied to.',

].join('\n'),

);

}

}, [childNode]);

}

const interactiveWrapperListeners = {};

if (!disableTouchListener) {

childrenProps.onTouchStart = handleTouchStart;

childrenProps.onTouchEnd = handleTouchEnd;

}

if (!disableHoverListener) {

childrenProps.onMouseOver = composeEventHandler(handleMouseOver, childrenProps.onMouseOver);

childrenProps.onMouseLeave = composeEventHandler(handleMouseLeave, childrenProps.onMouseLeave);

if (!disableInteractive) {

interactiveWrapperListeners.onMouseOver = handleMouseOver;

interactiveWrapperListeners.onMouseLeave = handleMouseLeave;

}

}

if (!disableFocusListener) {

childrenProps.onFocus = composeEventHandler(handleFocus, childrenProps.onFocus);

childrenProps.onBlur = composeEventHandler(handleBlur, childrenProps.onBlur);

if (!disableInteractive) {

interactiveWrapperListeners.onFocus = handleFocus;

interactiveWrapperListeners.onBlur = handleBlur;

}

}

if (process.env.NODE_ENV !== 'production') {

if (children.props.title) {

console.error(

[

'MUI: You have provided a `title` prop to the child of <Tooltip />.',

`Remove this title prop \`${children.props.title}\` or the Tooltip component.`,

].join('\n'),

);

}

}

const ownerState = {

...props,

isRtl,

arrow,

disableInteractive,

placement,

PopperComponentProp,

touch: ignoreNonTouchEvents.current,

};

const resolvedPopperProps =

typeof slotProps.popper === 'function' ? slotProps.popper(ownerState) : slotProps.popper;

const popperOptions = React.useMemo(() => {

let tooltipModifiers = [

{

name: 'arrow',

enabled: Boolean(arrowRef),

options: {

element: arrowRef,

padding: 4,

},

},

];

if (PopperProps.popperOptions?.modifiers) {

tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);

}

if (resolvedPopperProps?.popperOptions?.modifiers) {

tooltipModifiers = tooltipModifiers.concat(resolvedPopperProps.popperOptions.modifiers);

}

return {

...PopperProps.popperOptions,

...resolvedPopperProps?.popperOptions,

modifiers: tooltipModifiers,

};

}, [arrowRef, PopperProps.popperOptions, resolvedPopperProps?.popperOptions]);

const classes = useUtilityClasses(ownerState);

const resolvedTransitionProps =

typeof slotProps.transition === 'function'

? slotProps.transition(ownerState)

: slotProps.transition;

const externalForwardedProps = {

slots: {

popper: components.Popper,

transition: components.Transition ?? TransitionComponentProp,

tooltip: components.Tooltip,

arrow: components.Arrow,

...slots,

},

slotProps: {

arrow: slotProps.arrow ?? componentsProps.arrow,

popper: { ...PopperProps, ...(resolvedPopperProps ?? componentsProps.popper) }, // resolvedPopperProps can be spread because it's already an object

tooltip: slotProps.tooltip ?? componentsProps.tooltip,

transition: {

...TransitionProps,

...(resolvedTransitionProps ?? componentsProps.transition),

},

},

};

const [PopperSlot, popperSlotProps] = useSlot('popper', {

elementType: TooltipPopper,

externalForwardedProps,

ownerState,

className: clsx(classes.popper, PopperProps?.className),

});

const [TransitionSlot, transitionSlotProps] = useSlot('transition', {

elementType: Grow,

externalForwardedProps,

ownerState,

});

const [TooltipSlot, tooltipSlotProps] = useSlot('tooltip', {

elementType: TooltipTooltip,

className: classes.tooltip,

externalForwardedProps,

ownerState,

});

const [ArrowSlot, arrowSlotProps] = useSlot('arrow', {

elementType: TooltipArrow,

className: classes.arrow,

externalForwardedProps,

ownerState,

ref: setArrowRef,

});

return (

<React.Fragment>

{React.cloneElement(children, childrenProps)}

<PopperSlot

as={PopperComponentProp ?? Popper}

placement={placement}

anchorEl={

followCursor

? {

getBoundingClientRect: () => ({

top: cursorPosition.y,

left: cursorPosition.x,

right: cursorPosition.x,

bottom: cursorPosition.y,

width: 0,

height: 0,

}),

}

: childNode

}

popperRef={popperRef}

open={childNode ? open : false}

id={id}

transition

{...interactiveWrapperListeners}

{...popperSlotProps}

popperOptions={popperOptions}

>

{({ TransitionProps: TransitionPropsInner }) => (

<TransitionSlot

timeout={theme.transitions.duration.shorter}

{...TransitionPropsInner}

{...transitionSlotProps}

>

<TooltipSlot {...tooltipSlotProps}>

{title}

{arrow ? <ArrowSlot {...arrowSlotProps} /> : null}

</TooltipSlot>

</TransitionSlot>

)}

</PopperSlot>

</React.Fragment>

);