chore: replace tooltip

[daibhin]

Problem

Towards https://github.com/PostHog/posthog/issues/13624

Changes

• Reimplement the antd tooltip with our own custom component build on top of floating-ui
• Wrap everywhere we use an icon on a tooltip in a span to get around the fact that function components cannot accept refs (simpler than making every icon a forwardRef)
• Wrap any Lemon component that is used as a tooltip trigger in a forwardRef
• Upgrades FloatingUI to use FloatingArrow and replaces one deprecation in Popover
• Replaced some antd icons while I was in the file:

Before	After

How did you test this code?

Mainly relying on manual testing

[posthog-bot]

📸 UI snapshots have been updated

6 snapshot changes in total. 0 added, 6 modified, 0 deleted:

• chromium: 0 added, 6 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[github-actions[bot]]

Size Change: -49 kB (-6%) ✅

Total Size: 815 kB

Filename	Size	Change
frontend/dist/toolbar.js	815 kB	-49 kB (-6%)	✅

_{compressed-size-action}

[Twixes]

Didn't take a close look at the code, but nice work! From some quick clicking around I only have one note: I propose we use the same pop-in/out animation as in Popover (feels a bit weird with no animation, particularly when it shows up after a delay).

[daibhin]

@Twixes I tried recreating an animation using the CSSTransition component from the Popover but it didn't seem to work (part of me wonders if that's working either). I did manage to recreate a good approximation of what was there with antd (opacity and translating in X/Y direction) using the useTransitionStyles from Floating UI.

Feels nice not to need a CSS file. This should be good to go for a proper review now

[daibhin]

@Twixes yeah, it seems like we already suffer from "tooltips not appearing without wrapping divs in a number of places". Examples:

• https://github.com/PostHog/posthog/blob/857da0ebb5db04dd4277179c0acb10507d9dbc8c/frontend/src/scenes/insights/filters/PathCleaningFilter.tsx#L34
• https://github.com/PostHog/posthog/blob/master/frontend/src/scenes/pipeline/utils.tsx#L128
• https://github.com/PostHog/posthog/blob/857da0ebb5db04dd4277179c0acb10507d9dbc8c/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx#L402

Probably exasperated by this change. My thinking now is to:

• Add forwardRef to Lemon components that are used in tooltips
• Find all other instances (many are icons) and wrap them in a span tag

[posthog-bot]

📸 UI snapshots have been updated

49 snapshot changes in total. 0 added, 49 modified, 0 deleted:

• chromium: 0 added, 31 modified, 0 deleted (diff for shard 1, diff for shard 2)
• webkit: 0 added, 18 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

• chromium: 0 added, 0 modified, 0 deleted
• webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

6 snapshot changes in total. 0 added, 6 modified, 0 deleted:

• chromium: 0 added, 6 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

13 snapshot changes in total. 0 added, 13 modified, 0 deleted:

• chromium: 0 added, 12 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

• chromium: 0 added, 0 modified, 0 deleted
• webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

• chromium: 0 added, 0 modified, 0 deleted
• webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

• chromium: 0 added, 0 modified, 0 deleted
• webkit: 0 added, 1 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

• chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

• chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.