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 eabb67b2d1c241..d75f1ffd77ba25 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -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) {
}
}
- const PopperPropsToPassToPopper = React.useMemo(() => {
- const defaultPopperOptions = {
- modifiers: {
- arrow: {
- enabled: Boolean(arrowRef),
- element: arrowRef
- }
- }
- }
-
- return deepmerge({ popperOptions: defaultPopperOptions }, PopperProps || {})
- }, [arrowRef, PopperProps])
+ const mergedPopperProps = React.useMemo(() => {
+ return deepmerge(
+ {
+ popperOptions: {
+ modifiers: {
+ arrow: {
+ enabled: Boolean(arrowRef),
+ element: arrowRef,
+ },
+ },
+ },
+ },
+ PopperProps,
+ );
+ }, [arrowRef, PopperProps]);
return (
@@ -511,7 +514,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
id={childrenProps['aria-describedby']}
transition
{...interactiveWrapperListeners}
- {...PopperPropsToPassToPopper}
+ {...mergedPopperProps}
>
{({ placement: placementInner, TransitionProps: TransitionPropsInner }) => (
', () => {
describe('prop: PopperProps', () => {
it('should pass PopperProps to Popper Component', () => {
- const wrapper = mount();
-
- assert.strictEqual(wrapper.find(Popper).props().item, 'value');
- });
-
- it('should pass popperOptions to Popper Component when PopperProps is undefined', () => {
- const wrapper = mount();
-
- assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
- });
-
- it('should pass popperOptions to Popper Component when PopperProps is not undefined', () => {
- const wrapper = mount();
-
- assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
- assert.strictEqual(wrapper.find(Popper).props().item, 'value');
- });
-
- it('should merge popperOptions with arrow modifer', () => {
- const wrapper = mount(
- ,
- );
-
- assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
- assert.strictEqual(wrapper.find(Popper).props().popperOptions.item, 'value');
- });
-
- it('should merge popperOptions modifiers with arrow modifer', () => {
- const wrapper = mount(
- ,
+ const { getByTestId } = render(
+ ,
);
- assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
- assert.strictEqual(wrapper.find(Popper).props().popperOptions.modifiers.item, 'value');
+ expect(getByTestId('popper')).to.be.ok;
});
- it('should override popperOptions arrow modifier', () => {
- const wrapper = mount(
+ it('should merge popperOptions with arrow modifier', () => {
+ const popperRef = React.createRef();
+ render(
,
);
-
- assert.strictEqual(wrapper.find(Popper).props().popperOptions.modifiers.arrow, 'value');
+ expect(popperRef.current.modifiers.find(x => x.name === 'arrow').foo).to.equal('bar');
});
});