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

Question

I'm trying to reproduce the example of the Custom MultiValueContainer Example shown in the link, but nothing seems to work properly. The element is inserted (can be found within the React Component dev-tool) but the tooltip is never shown when hovered.

The code I'm trying to run is shown here , but even the simple code given in the example does not seem to work, as shown here

What I expect is something like the following:

Has anyone an idea what essential part I am overlooking?

Thanks in advance!

Answer 1

By adding a <span> Element to the CustomMultiValue and changing the Tooltip-library to material-ui , solved the problem.

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

Answer 2

If you want an individual tooltip per item you may do it like this:

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