Codesandbox-client: Switch from react-tippy to @tippy.js/react for tooltips

[atomiks]

🌈 Feature

CodeSandbox is using react-tippy for tooltips. I made the underlying tippy.js library which it uses, but not react-tippy. I think it's using a version of tippy.js from 2017 – since then, many bugs have been fixed and features released. It's been iterated on/improved a lot and is much more stable and mature now in 2019.

@tippy.js/react is the official React wrapper I released and is using the latest version (v4).

Some benefits out of the box:

• Smaller size compared to react-tippy
• Better appearance (animations are quicker, tooltips are smaller). The current ones feel quite large and slugglish at the moment. Technically you can fix this with react-tippy, but still
• Guaranteed updates (react-tippy is essentially unmaintained now)

Obviously there are quite a few breaking changes (tooltip DOM is different, React API is different), but I believe the switch should be worth it

[SaraVieira]

Hey!

Thank you to ives this appears to be the only file we create it:
https://github.com/CompuIves/codesandbox-client/blob/5ba087f1c2be5dfbeeac9e2b478068bdb7a853d0/packages/common/src/components/Tooltip.tsx

So changing shouldn't be that hard :)

[atomiks]

We could create a codemod-like wrapper for that to allow the current API to be used, just transform it to the new one? There's no withTooltip HOC though.

The main difference from react-tippy is:

• title prop is called content
• A bunch of other props for controlling the tooltip manually are different...

The CSS themes would be effortless to update.

[SaraVieira]

The withTooltip is actually only used in one place so it should be okay I think, I can find another way :)

I will try this in the afternoon today (10:30am current time) and can I ping you here if I have any issues? :)

[SaraVieira]

I am getting this error:
https://github.com/atomiks/tippy.js-react/issues/49

If I understand correctly I need to do this:

        <Tooltip content={actionTitle} key={actionTitle}>
          {forwardRef((props, ref) => (
            <Icon onClick={onClick} key={actionTitle} ref={ref} />
          ))}
        </Tooltip>

But doing this for every component is not maintnable since we use it EVERYWHERE :(

[atomiks]

Is Icon a styled component? With v4 you shouldn't need to use forwardRef

https://codesandbox.io/s/r0oqn4o26o

[SaraVieira]

Oh sorry, Icon is passed dynamically

Most of them come from this lib
http://react-icons.github.io/react-icons/fa.html

Example:

           <Tooltip placement="bottom" content="New Sandbox">
              {forwardRef((props, ref) => <PlusIcon ref={ref} height={35} />)}
            </Tooltip>

[atomiks]

Using a <span> wrapper is a workaround...:

<Tooltip content={actionTitle} key={actionTitle}>
  <span>
    <Icon onClick={onClick} key={actionTitle} ref={ref} />
  </span>
</Tooltip>

You could add this in a wrapper component automatically for now?

[SaraVieira]

Does a Fragment work as workaround? otherwise, I will add the span

[atomiks]

It needs to be a real element since that's what the tooltip will be attached to

[SaraVieira]

I am on it! 👍

[atomiks]

Here is the updated CSS btw!

const GlobalStyle = createGlobalStyle`
  .tippy-backdrop {
    background-color: rgb(21, 24, 25);
  }

  .tippy-tooltip.update-theme {
    background-color: ${theme.green()};
    border-radius: 2px;
    padding: 0;

    .tippy-arrow {
      border-bottom-color: ${theme.green()};
    }
  }
`;

I don't think the !importants are necessary anymore.

[SaraVieira]

I think it should be done here: https://github.com/CompuIves/codesandbox-client/pull/1584

Can you please take a look? :)