[Tooltip] How to customize the tooltip?

[samueldepooter]

• [x] 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

[samueldepooter]

That is not the issue with this component, the styles are just not applied at all. You can try it yourself if you want with my codesandbox.

It works just fine for other material-ui components though.

[artalar]

This is workaround to you https://codesandbox.io/s/lr20v47ql9

[andrewmclagan]

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

[oky1]

const styles = theme =>({
 tooltip: {  backgroundColor: 'red' }
});
  <Tooltip  classes={{ tooltip: classes.tooltip }} >...

[aqueiros]

Greetings! Am I right in thinking that the solutions provided here, don't really fix the problem @samueldepooter reported? I am experiencing this still. I am unable to override Tooltip style using styled-components like it says in This page. Any other component as far as I see works.

Overriding it via classes works sure, but that is not the point of the issue being open.

[oliviertassinari]

@aqueiros Do you have a reproduction example?

[aqueiros]

Hi @oliviertassinari , I did not provide one because @samueldepooter 's code sandbox depicts the problem pretty well.

[oliviertassinari]

@aqueiros Thanks for raising your voice. This process is part of who we move forward. The more people are complaining, the better SNR ratio we have. The issue comes from the fact that the Tooltip has no root DOM element to apply the styled-component class name on. You even have a warning:

Warning: Failed prop type: The following properties are not supported: className. Please remove them. in Tooltip (created by WithStyles(Tooltip)) in WithStyles(Tooltip) (created by Styled(WithStyles(Tooltip))) in Styled(WithStyles(Tooltip)) (created by Index) in Index

[oliviertassinari]

The best path going forward would be to spread the other properties on the Popper component and to deprecate PopperProps. Do you want to work on it?

[aqueiros]

@oliviertassinari sure, I can take a look. But I will only be able to pick it up starting Monday next week.

[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:

[pezzullig]

Thanks a lot for this fix! Has anyone managed to add custom width to the tooltip? I've tried all combinations of maxWidth and/or width but haven't been able to make it work

  & .tooltip {
    background-color: papayawhip;
    maxWidth: 500;
    color: #000;

[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.