如何显示每个 react-select 多值元素的工具提示？

Question

我正在尝试重现 link 中显示的 Custom MultiValueContainer Example 示例，但似乎无法正常工作。元素已插入（可以在 React Component 开发工具中找到）但悬停时从未显示工具提示。

显示了我正在尝试运行的代码 here, but even the simple code given in the example does not seem to work, as shown here

我期望的是如下内容：

有谁知道我忽略了哪个重要部分？

提前致谢！

Answer 1

通过将 <span> 元素添加到 CustomMultiValue 并将工具提示库更改为 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}}
>

如何显示每个 react-select 多值元素的工具提示？

How to show tooltip for each react-select multiValue element?

javascript

tooltip

reactjs

react-select