How can I style MUI Tooltip
text? The default tooltip on hover comes out black with no text-wrap. Is it possible to change the background, color etc? Is this option even available?
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; import Button from "@mui/material/Button"; import Stack from "@mui/material/Stack"; import { styled } from "@mui/material/styles"; The tooltipClasses import is a useful way to get access to all the names of CSS classes applied by default to the tooltip.
To style React Material UI tooltip, we can use the makeStyles function. We call makeStyles with a function that returns an object that has some classes with some styles. We set the background color and the color in the classes.
The MUI Tooltip can include an “arrow” pointer simply by including prop arrow={true} . Styling is possible by targeting the MuiTooltip-arrow class and the :before pseudo-element. Add the below inside the PopperProps sx prop to create the same styling as my tutorial. My example still uses position="left-start" .
The Tooltip can be customized by using the cssClass property, which accepts custom CSS class names that define specific user-defined styles and themes to be applied on the Tooltip element.
The other popular answer (by André Junges) on this question is for the 0.x versions of Material-UI. Below I've copied in my answer from Material UI's Tooltip - Customization Style which addresses this for v3 and v4. Further down, I have added a version of the example using v5.
Below are examples of how to override all tooltips via the theme, or to just customize a single tooltip using withStyles (two different examples). The second approach could also be used to create a custom tooltip component that you could reuse without forcing it to be used globally.
import React from "react"; import ReactDOM from "react-dom"; import { createMuiTheme, MuiThemeProvider, withStyles } from "@material-ui/core/styles"; import Tooltip from "@material-ui/core/Tooltip"; const defaultTheme = createMuiTheme(); const theme = createMuiTheme({ overrides: { MuiTooltip: { tooltip: { fontSize: "2em", color: "yellow", backgroundColor: "red" } } } }); const BlueOnGreenTooltip = withStyles({ tooltip: { color: "lightblue", backgroundColor: "green" } })(Tooltip); const TextOnlyTooltip = withStyles({ tooltip: { color: "black", backgroundColor: "transparent" } })(Tooltip); function App(props) { return ( <MuiThemeProvider theme={defaultTheme}> <div className="App"> <MuiThemeProvider theme={theme}> <Tooltip title="This tooltip is customized via overrides in the theme"> <div style={{ marginBottom: "20px" }}> Hover to see tooltip customized via theme </div> </Tooltip> </MuiThemeProvider> <BlueOnGreenTooltip title="This tooltip is customized via withStyles"> <div style={{ marginBottom: "20px" }}> Hover to see blue-on-green tooltip customized via withStyles </div> </BlueOnGreenTooltip> <TextOnlyTooltip title="This tooltip is customized via withStyles"> <div>Hover to see text-only tooltip customized via withStyles</div> </TextOnlyTooltip> </div> </MuiThemeProvider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Here is documentation on tooltip CSS classes available to control different aspects of tooltip behavior: https://material-ui.com/api/tooltip/#css
Here is documentation on overriding these classes in the theme: https://material-ui.com/customization/components/#global-theme-override
Here is a similar example, but updated to work with v5 of Material-UI (pay attention that it works in 5.0.3 and upper versions after some fixes). It includes customization via the theme, customization using styled
, and customization using the sx
prop. All of these customizations target the "tooltip slot" so that the CSS is applied to the element that controls the visual look of the tooltip.
import React from "react"; import ReactDOM from "react-dom"; import { createTheme, ThemeProvider, styled } from "@mui/material/styles"; import Tooltip from "@mui/material/Tooltip"; const defaultTheme = createTheme(); const theme = createTheme({ components: { MuiTooltip: { styleOverrides: { tooltip: { fontSize: "2em", color: "yellow", backgroundColor: "red" } } } } }); const BlueOnGreenTooltip = styled(({ className, ...props }) => ( <Tooltip {...props} componentsProps={{ tooltip: { className: className } }} /> ))(` color: lightblue; background-color: green; font-size: 1.5em; `); const TextOnlyTooltip = styled(({ className, ...props }) => ( <Tooltip {...props} componentsProps={{ tooltip: { className: className } }} /> ))(` color: black; background-color: transparent; `); function App(props) { return ( <ThemeProvider theme={defaultTheme}> <div className="App"> <ThemeProvider theme={theme}> <Tooltip title="This tooltip is customized via overrides in the theme"> <div style={{ marginBottom: "20px" }}> Hover to see tooltip customized via theme </div> </Tooltip> </ThemeProvider> <BlueOnGreenTooltip title="This tooltip is customized via styled"> <div style={{ marginBottom: "20px" }}> Hover to see blue-on-green tooltip customized via styled </div> </BlueOnGreenTooltip> <TextOnlyTooltip title="This tooltip is customized via styled"> <div style={{ marginBottom: "20px" }}> Hover to see text-only tooltip customized via styled </div> </TextOnlyTooltip> <Tooltip title="This tooltip is customized via the sx prop" componentsProps={{ tooltip: { sx: { color: "purple", backgroundColor: "lightblue", fontSize: "2em" } } }} > <div> Hover to see purple-on-blue tooltip customized via the sx prop </div> </Tooltip> </div> </ThemeProvider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Documentation on changes to the theme structure between v4 and v5: https://mui.com/guides/migration-v4/#theme
Tooltip customization examples in the Material-UI documentation: https://mui.com/components/tooltips/#customization
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With