如何为MultiSelect组件的每个选中值显示动态Tooltip？

要给MultiSelect每个选中的选项单独添加Tooltip，你需要自定义选中标签的渲染逻辑——当前的title属性是作用于整个组件的，无法针对单个选中项生效。

修改方案： #

1. 导入Mantine的Tooltip组件
2. 通过renderChip属性自定义每个选中标签的渲染，将每个标签包裹在Tooltip中
3. 为每个Tooltip传入对应选项的提示内容

修改后的完整代码： #

import { MultiSelect, Tooltip } from "@mantine/core";
import { useState } from "react";

function New() {
  const [multiSelectVal, setMultiSelectVal] = useState([]);

  const data = [
    { value: "React", label: "React" },
    { value: "Angular", label: "Angular" },
    { value: "Vue", label: "Vue" },
    { value: "NextJS", label: "NextJS" },
  ];

  const handleMultiselect = (e) => {
    setMultiSelectVal(e);
  };

  const getTooltipText = (value) => {
    return `This is the tooltip for ${value}`;
  };

  return (
    <>
      <MultiSelect
        data={data}
        onChange={(e) => handleMultiselect(e)}
        value={multiSelectVal}
        label="Frameworks"
        placeholder="Pick all that you like"
        // 自定义选中标签的渲染逻辑
        renderChip={({ value, label, onRemove }) => (
          <Tooltip label={getTooltipText(value)}>
            <div style={{ margin: "2px" }}>
              <MultiSelect.Chip
                value={value}
                label={label}
                onRemove={onRemove}
              />
            </div>
          </Tooltip>
        )}
      />
    </>
  );
}

export default New;

关键说明： #

• renderChip函数接收每个选中项的value、label和onRemove回调，既可以自定义标签外观，也能保留原有的删除交互
• 用Tooltip包裹MultiSelect.Chip，在不破坏原组件样式的前提下，为每个选中项添加悬停提示
• 原代码中的events属性可直接移除，Tooltip组件会自动处理悬停触发逻辑

内容的提问来源于stack exchange，提问作者Divyesh Bhuva