score:1
ideally there is two way of doing this.
- 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 whentooltipopen
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}
/>
Source: stackoverflow.com
Related Query
- Material UI SpeedDial | How to customize ToolTips
- How to customize Autocomplete tag - Material UI
- How to customize colors in Material UI Stepper Step?
- How do I customize Material UI in React?
- how to customize material ui tabs, tabs scroller
- How customize material ui select
- Material ui v4: I want to customize a Material UI button inside a class component using types script. Kindly let me know how can I do it?
- How to customize Material UI autocomplete dropdown menu
- How to customize the Material UI Card boxshadow?
- How to customize text colors in the material ui in v 1.0.0
- How to customize scrollbar in Material UI?
- How to customize md break point for a single material ui Grid instance using css
- How do you customize the material UI select component?
- how to customize react material ui next component
- How to customize background color of button using Material UI themes
- how to customize material UI date-Picker icon for version 5?
- How to customize label color of material ui Textfield when out of focus?
- How can I customize the action icons in Material Table dynamically?
- How to style components using makeStyles and still have lifecycle methods in Material UI?
- How to add multiple classes in Material UI using the classes props?
- How to enable file upload on React's Material UI simple input?
- How to use useStyle to style Class Component in Material Ui
- How to make a Material UI react Button act as a react-router-dom Link?
- how to import material ui icons?i met some problems using Material ui icons
- How can I customize the color of a Checkbox in MUI?
- How to make the whole Card component clickable in Material UI using React JS?
- How to submit the form by Material UI Dialog using ReactJS
- How to test material ui autocomplete with react testing library
- How to add close icon in Material UI Dialog Header top right corner
- how to make material data grid width to fill the parent component in react js
More Query from same tag
- react-beautiful-dnd pull out the anonymous function from React Draggable component
- How to set cursor position inside Textarea in ReactJs?
- How to detect if an array of objects has changed
- ReactJS : this.setState is not a function?
- React-admin TextField in List component shows "null". Can I convert this to blank?
- How can I set up state to allow one child component to render another
- How can I map through two arrays in React at the same time?
- getStaticProps doesn't work when reload the page hosted on vercel
- React switching between components or hiding and transitions
- TypeError: links.map is not a function React
- redux toolkit +connected-react-router
- How to create sticky header with flexbox and REACT
- reactjs Uncaught Error: Actions must be plain objects. Use custom middleware for async actions
- Mock function not being called in Jest + Enzyme test
- Use CSS Modules in React components with Typescript built by webpack
- Why is my ipcMain returning an empty array after reading through a database?
- Implement a feature in my React app where the users can add my products to their Shopify store
- xTypeError: Cannot read properties of undefined (reading 'author')
- How to add external javascript file with reactjs
- Get total width of JSX Element
- Publishing mocks for an npm package to be used by jest's module mocking system
- React Route with URL Param Not Updating View
- Fill in empty blocks for each calendar month JS
- Unable to render state, but can console.log it
- Im having trouble overriding material-ui root style for DialogActions
- Object.assign does not update my state (React)
- Is fetch inside getStaticProps and getServerSideProps the same as the native browser fetch API?
- How to use regex to split a string by comma or linebreak in javascript?
- Correctly creating an antd Form using the extends React.Component mechanism
- How to find out memory leaks in react native app?