如何显示每个反应工具提示-选择multiValue元素？

Question

我正在尝试复制链接中显示的自定义MultiValueContainer示例示例，但似乎没有什么能正常工作。元素被插入(可以在tool中找到)，但是工具提示永远不会在悬停时显示。

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

我所期望的是这样的情况：

​

有人知道我忽略了什么重要的部分吗？

提前感谢！

Answer 1

通过将<span>元素添加到CustomMultiValue中并将工具提示库更改为material，解决了这个问题。

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}}
>