将鼠标光标悬停在自动完成 mui 输入中的选定元素上时是否可以添加工具提示？

Question

当鼠标光标悬停在输入内选定的元素上时，是否可以添加工具提示，前提是该元素超出容器的宽度？

我尝试在

Tooltip

属性中将

TextField

包裹在

renderInput

周围。

一方面有帮助，但也有很多不必要的重画。 对是否可以只包装值感兴趣。

Answer 1

您可以通过操作

getOptionLabel

属性来解决此问题。

import * as React from 'react';
import Chip from '@mui/material/Chip';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';

export default function Tags() {
  return (
    <Stack spacing={3} sx={{ width: 500 }}>
      <Autocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        getOptionLabel={(option) => (
          <Tooltip title={option.title}>{option.title}</Tooltip>
        )}
        defaultValue={[top100Films[0]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="tooltip"
            placeholder="Favorites"
          />
        )}
      />
    </Stack>
  );
}

const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
];