[Tooltip] How to customize the tooltip?

[samueldepooter]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Turn Tooltip into styled component
-> use classes attribute to override tooltip class
-> styles should be applied to the element

Current Behavior

I can see that my new tooltip class is on the element itself but without styles.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/yj7wjr753z

1. Render Tooltip
2. Implement styled components
3. Override a specific class with the classes attribute
4. Apply styling to the specified class

Your Environment

Tech	Version
Material-UI	latest
React	latest

[pelotom]

See https://next.material-ui.com/guides/interoperability/#portals

[andrewmclagan]

Yeah this is also effecting us. We cannot apply a style={{ attribute: 'value' }} to a <Tooltip /> component

[oliviertassinari]

Here is a working example following our guide, it can be further improved by adding theme to the styled components theme.

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

const StyledTooltip = styled(props => (
  <Tooltip classes={{ popper: props.className }} {...props} />
))`
  & .MuiTooltip-tooltip {
    background-color: papayawhip;
    color: #000;
  }
`;

function StyledComponents() {
  return (
    <StyledTooltip title="Demo">
      <Button>Styled Components</Button>
    </StyledTooltip>
  );
}

export default StyledComponents;

https://codesandbox.io/s/8109v3n1x8?file=/StyledComponentsButton.js

---

If you are wondering what classes you can use, you can find the information in the API docs page:

https://material-ui.com/api/tooltip/

or in the Dev Tool directly:

[oliviertassinari]

@pezzullig Did you check https://material-ui.com/demos/tooltips/#variable-width out?

[pezzullig]

Yes I did try that and it does work withStyles. I was just trying to get it to work in your codepen with the styled-components but I couldn't manage it. Am I right in saying that setting the maxWidth parameter in the .tooltip section should be equivalent to the withStyles method suggested?

[oliviertassinari]

@pezzullig maxWidth: 500; that's not a valid CSS property.

[pezzullig]

Ah yes you're right thanks @oliviertassinari ! max-width: 500px; works.

[lalinchik]

Hi @oliviertassinari . When I use your solution, it works as expected. But I tried to rewrite it by .attr and it doesn't work.
Can you explaine why? Thank you in advance.

const StyledTooltip = styled(Tooltip).attrs((props) => ({
  classes: { popper: props.className, tooltip: "tooltip" }
}))`
  & .tooltip {
    background-color: red;
    color: #000;
  }
`;

[BeKnowDo]

2021 and I can't get this example to work :-/

[oliviertassinari]

@BeKnowDo I have updated my initial comment to be more up to date. This case is even in the docs now: https://next.material-ui.com/guides/interoperability/#portals.

The customization demos cover it too: https://next.material-ui.com/components/tooltips/#customized-tooltips.

[malavshah9]

Thanks @oliviertassinari . This helped me a lot.