Estoy usando el componente Autocompletar material-UI en mi aplicación de reacción y quiero mostrar un div al pasar el mouse sobre una opción de la lista (como en la imagen)
alguna ayuda con eso por favor
necesita usar el atributo renderOption con una información sobre herramientas como esta:
import React from "react"; import TextField from "@material-ui/core/TextField"; import Autocomplete from "@material-ui/lab/Autocomplete"; import { Button, Tooltip } from "@material-ui/core"; import { Info } from "@material-ui/icons"; export default function ComboBox() { const defaultProps = { options: top100Films, getOptionLabel: option => option.title }; return ( <Autocomplete {...defaultProps} id="list-option" debug ListboxComponent={props => <div {...props} />} getOptionDisabled={({ year }) => year > 2000} renderOption={({ title, year, ...props }) => { return ( <div> <Tooltip title={`Too Old ${year}`} placement="bottom"> <div> <Button endIcon={<Info />} component="li" {...props} fullWidth> {title} - {year} </Button> </div> </Tooltip> </div> ); }} renderInput={params => ( <TextField {...params} label="Broken Disabled Tooltips" margin="normal" fullWidth /> )} /> ); }