`<Tooltip
placement="left"
classes={{
tooltip: "classes.customTooltip",
arrow: "classes.customArrow",
}}
title="Reverse POS Update"
arrow
>
<IconButton aria-label="edit" onClick={() => handleEdit(params.id)}>
<SyncAltRoundedIcon className="reversebtn" />
</IconButton>
</Tooltip>`
I am Using Datagrid and in one of the column i used and icon instead of button and i apply a tooltip of mui on hover and my icon is of red color and i also want my tooltip to be red.
{ field: "TickToDelete", headerName: "Delete", width: 70, sortable: true, renderCell: (params) => { return ( <Tooltip title="Delete" placement="right"> <IconButton aria-label="edit" onClick={() => handleEdit(params.id)}> <DeleteIcon /> </IconButton> </Tooltip> ); }, },
In MUI5, You can customize styling of <Tooltip/>
using componentsProps
. Check the example below 👇
<Tooltip
title="Delete"
open={true}
componentsProps={{
tooltip: {
sx: {
bgcolor: "red",
color: "white"
}
}
}}
>