score:1

Accepted answer

ideally there is two way of doing this.

  1. when you want your tooltip open along with your hovered item. if you go through material official documentation. you need to add style for statictooltiplabel . you can do this using like this. keep in mind this works when tooltipopen is set to true.

make sure add

const usestyles = makestyles((theme) => ({
  statictooltiplabel: {
    backgroundcolor: "red"
  }
}));

// then pass classes to classess

<speeddialaction
            key={action.name}
            icon={action.icon}
            tooltiptitle={action.name}
            onclick={handleclose}
            classes={classes}
            tooltipopen
          />

if your tooltipopen is not set default. then your code works only you need to pass only tooltipclasses={classes}

here is the demo: https://codesandbox.io/s/material-demo-forked-nexgi?file=/demo.js

try removing tooltipopen to get how tooltip is working in material with speeddial component

score:1

the theme can be overridden so that the style changes are applied to all instances of speeddialaction. since the tooltipopen parameter is passed, you'll need to target statictooltiplabel:

const theme = createmuitheme({
  overrides: {
    muispeeddialaction: {
      statictooltiplabel: {
        backgroundcolor : 'red',
        width : 150,
      },
    },
  },
});

<themeprovider theme={theme}>
  <app />
</themeprovider>

score:2

if you, like in my case, want to avoid displaying multiline tooltip labels and others' solutions didn't work, this did the job for me.

const usestyles = makestyles((theme: theme) =>
    createstyles({
        statictooltiplabel: {
        whitespace: "nowrap",
        maxwidth: "none",
      },
    /// speed dial stuff
}


//your stuff

<speeddialaction
     classes={{ statictooltiplabel: styles.statictooltiplabel }}
     key={action.name}
     icon={action.icon}
     tooltiptitle={action.name}
     tooltipopen
     onclick={handleclose}
/>

Related Query

More Query from same tag