如何顯示每個反應選擇多值元素的工具提示？

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