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

Is it possible to add a tooltip when hovering the mouse cursor over the selected element inside input to Autocomplete mui?

提问人:Fedor 提问时间:11/10/2023 最后编辑:KalanaFedor 更新时间:11/12/2023 访问量:19

问:

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

我尝试在属性中将 a 包裹在 a 周围。TooltipTextFieldrenderInput

一方面,它有帮助,但有很多不必要的重绘。 对是否可以仅包装值感兴趣。

reactjs input material-ui 自动完成

评论


答:

0赞 Kalana 11/12/2023 #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 },
];

评论

0赞 Fedor 11/13/2023
谢谢你的回答!我也考虑过,但是getOptionLabel应该根据文档返回一个字符串,当我尝试输出节点元素时,我看到错误和不正确的显示
0赞 Kalana 11/15/2023
你能用到目前为止你尝试过什么以及你得到的结果来更新你的问题吗?