How to overwrite Material UI tooltip inline styles?

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?

Answer 1

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>
  );
}

Answer 2

<Tooltip
  title={
    <React.Fragment>
      <span className={classes.arrowArrow} ref={this.handleArrowRef} />
    </React.Fragment>
  }
  placement="right" //---> right/left/top/bottom
  classes={{
    popper: classes.arrowPopper,
    tooltip: classes.darkTooltip,
  }}
  PopperProps={{
    popperOptions: {
      modifiers: {
        arrow: {
          enabled: Boolean(this.state.arrowRef),
          element: this.state.arrowRef,
        }
      }
    }
  }}
>
  <sub className={classes.subscript}>see more...</sub>
</Tooltip>