Answer a question

I am currently developing a React component that leverages the Material UI Tooltip component. Within my component, I need to manually re-position the Mui Tooltip via the root popper element (MuiTooltip-popper).

But, the Mui Tooltip is rendered with a handful of inline CSS properties out-of-the-box:

position: absolute;
transform: translate3d(792px, 68px, 0px); 
top: 0px;
left: 0px;
will-change: transform;

If one attempts to provide new styles to replace these within the style attribute, the properties are simply not applied - they vanish completely. If one attempts to provide replacement styles via a class (e.g. via the CSS-in-JS approach advocated by Material UI), these styles are not applied as the inline style has precedence.

I have been able to overwrite the styles using the !important flag in my CSS class. However, doesn't feel like a very elegant solution. Is there a more "clean" way I can overwrite the styles?

Answers

To reposition the popper you have to pass along the right settings to the actual popper library

The valid options for the offset property are displayed here: https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiersoffset

I've provided an example to move it 40px up and 40px right from the default 'top' position.

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <div>
      <Tooltip
        style={{ margin: "150px" }}
        title="ABCDEFG"
        placement="top"
        open
        PopperProps={{
          popperOptions: {
            modifiers: {
              offset: {
                enabled: true,
                offset: '40px, 40px',
              },
            },
          },
        }}

      >
        <Button>My button</Button>
      </Tooltip>
    </div>
  );
}