diff --git a/docs/pages/api/tooltip.md b/docs/pages/api/tooltip.md
index 32a820145ba3f1..94cda4b5019ad1 100644
--- a/docs/pages/api/tooltip.md
+++ b/docs/pages/api/tooltip.md
@@ -41,7 +41,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| 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'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top' | 'bottom' | Tooltip placement. |
-| PopperProps | object | | Props applied to the [`Popper`](/api/popper/) element. |
+| PopperProps | object | {} | Props applied to the [`Popper`](/api/popper/) element. |
| title * | node | | Tooltip title. Zero-length titles string are never displayed. |
| TransitionComponent | elementType | Grow | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| TransitionProps | object | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 3f7991e684b6c8..d75f1ffd77ba25 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -2,7 +2,7 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { elementAcceptingRef } from '@material-ui/utils';
+import { deepmerge, elementAcceptingRef } from '@material-ui/utils';
import { fade } from '../styles/colorManipulator';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
@@ -194,7 +194,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
onOpen,
open: openProp,
placement = 'bottom',
- PopperProps,
+ PopperProps = {},
title,
TransitionComponent = Grow,
TransitionProps,
@@ -484,18 +484,21 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
}
}
- // Avoid the creation of a new Popper.js instance at each render.
- const popperOptions = React.useMemo(
- () => ({
- modifiers: {
- arrow: {
- enabled: Boolean(arrowRef),
- element: arrowRef,
+ const mergedPopperProps = React.useMemo(() => {
+ return deepmerge(
+ {
+ popperOptions: {
+ modifiers: {
+ arrow: {
+ enabled: Boolean(arrowRef),
+ element: arrowRef,
+ },
+ },
},
},
- }),
- [arrowRef],
- );
+ PopperProps,
+ );
+ }, [arrowRef, PopperProps]);
return (
@@ -510,9 +513,8 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
open={childNode ? open : false}
id={childrenProps['aria-describedby']}
transition
- popperOptions={popperOptions}
{...interactiveWrapperListeners}
- {...PopperProps}
+ {...mergedPopperProps}
>
{({ placement: placementInner, TransitionProps: TransitionPropsInner }) => (
', () => {
});
});
+ describe('prop: PopperProps', () => {
+ it('should pass PopperProps to Popper Component', () => {
+ const { getByTestId } = render(
+ ,
+ );
+
+ expect(getByTestId('popper')).to.be.ok;
+ });
+
+ it('should merge popperOptions with arrow modifier', () => {
+ const popperRef = React.createRef();
+ render(
+ ,
+ );
+ expect(popperRef.current.modifiers.find(x => x.name === 'arrow').foo).to.equal('bar');
+ });
+ });
+
describe('forward', () => {
it('should forward props to the child element', () => {
const wrapper = mount(