En mi aplicación, uso MUI React Library para generar una información sobre herramientas personalizada utilizando componentes Card y Accordion . La información sobre herramientas se muestra al pasar el mouse.

El problema es que en la información sobre herramientas, los componentes del Accordion no se expanden. Casi copié la demostración de la API de MUI ( https://codesandbox.io/s/6o0jzg?file=/demo.js:375-1699 ), así que creo que CSS adicional.

Vea a continuación mi código y la foto de la información sobre herramientas no expandible:

 const CustomTooltip = ({ payload }: TooltipProps<ValueType, NameType> | any) => { if( payload && payload.length){ var idTarget = []; let idTargetData: any = payload[0].payload.id; for(let i = 0; i < idTargetData.length; i++){ for(let j = 0; j<idTargetData[i].length; j++){ idTarget.push( <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id={Object.keys(idTargetData[i][j]).toString()} > <Typography sx={{ fontSize: 14 }} color={"white"} > id : {Object.keys(idTargetData[i][j]).toString()} </Typography> </AccordionSummary> <AccordionDetails> <Typography> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </Typography> </AccordionDetails> </Accordion> ) } } return ( <> <Card sx={{ minWidth: 12, backgroundColor: "white"}}> <CardContent> {idTarget} </CardContent> </Card> </> ); } return null; } //later in code return( <Tooltip content = {<CustomTooltip/> } labelStyle={{ color: "black" }} /> );