Nested tooltips don't function as intended

What package has an issue

@mantine/core

Describe the bug

Nested tooltips seem to inherit each-others properties leading to buggy behaviors or not showing at all.

See the linked demo where we attempt to nest a clickable Tooltip inside of a hoverable Tooltip, and instead neither fires.

What version of @mantine/hooks page do you have in package.json?

5.2.0

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/optimistic-meadow-95x4i9

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

Unknown. It works with TippyJS, however they manage this.

We had a custom wrapper to also help with this, but that doesn’t help in this case either unfortunately:

function mergeRefs(refs) {
  return value => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(value);
      } else if (ref != null) {
        ref.current = value;
      }
    });
  };
}


const TooltipWrap = forwardRef(({ label, tooltipOpts = {}, children }, ref) => {
  const mergedRefs = mergeRefs([children.ref, ref]);
  return label ? (
    <Tooltip
      {...{
        label,
        // NOTE: Doesn't work even if we use ...props here
      }}
      {...tooltipOpts}
    >
      {React.cloneElement(children, { ref: mergedRefs })}
    </Tooltip>
  ) : (
    React.cloneElement(children, { ref: mergedRefs })
  );
});

[nfbuckley]

Never mind my previous comment - there is a simpler solution which involves merging the incoming events (from the parent tooltip) with the current tooltip. I did a quick test and it appears to work. I’ll see if I can’t put together a PR.

[rtivital]

Yes, I will try to resolve this, not sure if it is possible yet