Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

291
Views
Customizing material ui autocompete

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)

Show image

any help with that, please

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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
            />
          )}
        />
      );
    }
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!