如何显示每个反应选择多值元素的工具提示？

Question

我正在尝试重现链接中显示的自定义 MultiValueContainer 示例的示例，但似乎没有任何工作正常。 元素已插入（可以在 React 组件开发工具中找到），但悬停时永远不会显示工具提示。

我尝试运行的代码显示在这里，但即使是示例中给出的简单代码似乎也不起作用，如此处所示

我期望的是如下所示：

有谁知道我忽略了什么重要部分？

提前致谢！

Answer 1

通过将<span>元素添加到 CustomMultiValue 并将 Tooltip-library 更改为material-ui ，解决了该问题。

const CustomMultiValue = (props) => {
  return (
    <Tooltip title={"Here we could show the legend of the element"}>
      <span>
        <MultiValueContainer {...props} />
      </span>
    </Tooltip>
  );
};

Answer 2

如果您希望每个项目有一个单独的工具提示，您可以这样做：

const CustomMultiValueLabel = props => {
    return (
        <MultiValueLabel {...props} >
        <div className={styles.tooltip}>
            {props.data.label}
            <span className={styles.tooltiptext}>This is the tooltip text for {props.data.label}</span>
        </div>
        </MultiValueLabel>
    );
};

<Select isMulti
        components={{MultiValueLabel: CustomMultiValueLabel}}
>