2

I'm trying to customize material ui tooltip for react storybook

I have tried changing some css properties like width, height, background color but failed to see those changes

import * as React from 'react';
import { createStyles, withStyles, Tooltip, IconButton } from '@material-ui/core';

const styles = (theme: any) => createStyles({
  tooptip: {
    width: "92px",
    height: "36px",
    borderRadius: "18px",
    boxShadow: "0 20px 80px 0",
    backgroundColor:"red"
  }

});
interface ToolTipProps {

  children?: JSX.Element[] | JSX.Element;
  classes?: { [key:string]: string };

}
function ToolTip({ classes }: ToolTipProps): JSX.Element {

  return (
      <Tooltip title="Tooltip" classes={classes}>
        <div>Hover</div>
      </Tooltip>
  );
}
export default withStyles(styles)(ToolTip);

I need to customize tooltip

4 Answers 4

5

4 years and 2 months later, I only needed to customize the width.

In my case, this was the solution.

<Tooltip
    title={'Tooltip text'}
    componentsProps={{
        tooltip: {
            sx: {
                width: '6rem'
            },
        },
    }}>
</Tooltip>
1
  • This solution appears to be useful in 2024, only using the MUI's componentsProps without styled and theme.
    – DineshMsd
    Commented Jan 29 at 11:32
4
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

const styles = {
    tooltip: {
        width: "92px",
        height: "36px",
        borderRadius: "18px",
        boxShadow: "0 20px 80px 0",
        backgroundColor: "red"
    }
};

const CustomTooltip = withStyles(styles)(Tooltip);

function MyCustomTooltip() {
    return (
        <CustomTooltip title="Tooltip">
             <Button>Custom Tooltip</Button>
        </CustomTooltip>
   );
}

export default MyCustomTooltip;

Live demo

You have to do Typescript stuff by yourself. I don't use it, so I don't know how it should be done :).

1

Another way to customize material-ui components would be to use themes.

import { createMuiTheme } from "@material-ui/core/styles";

import lightGreen from "@material-ui/core/colors/lightGreen";
import lime from "@material-ui/core/colors/lime";
import teal from "@material-ui/core/colors/teal";
import yellow from "@material-ui/core/colors/yellow";
import deepOrange from "@material-ui/core/colors/deepOrange";

export default createMuiTheme({
  palette: {
    primary: lime,
    secondary: teal,
    error: deepOrange,
    action: {
      disabledBackground: teal[400]
    },
    text: {
      primary: lightGreen[900],
      secondary: teal[700],
      disabled: yellow[600]
    }
  },
  status: {
    danger: "orange"
  }
});

and then wrap your app / component implementation in material-ui ThemeProvider

import GardenTheme from './themes';
/* your story / component code */
return (
  <ThemeProvider theme={GardenTheme}>
    /* tooltip */
  </ThemeProvider>
);

I wrote a short article on usage of material-ui themes on medium link

1
  • I wanted to apply the html font-size to the Tooltips title, too which wasn't successfull with ThemeProvider only. Wrapping the title param in a <Typography> tag then worked.
    – User Rebo
    Commented Jul 29, 2020 at 13:23
1

similar to solution1 but with typescript type

const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
   ))({
      [`& .${tooltipClasses.tooltip}`]: {
            maxWidth: 500,
      },
   }); 

   

For detail, see https://refine.dev/blog/material-ui-tooltip-component/#width-variations

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.