I'm using the material-UI Autocomplete component in my react app and I want to show a div when hovering on an option from the list (like in the image)
any help with that, please
you need to use the renderOption attribute with a Tooltip like this :
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
/>
)}
/>
);
}