From 043570d3d3a8d3f4409750a5d8f564a33f0f12ce Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 16 Sep 2024 18:13:47 +0200
Subject: [PATCH] Fix slider number control performance (#6374)

**Problem:**
When using the slider in the SliderNumber controls (such as the
PromiseCard's BorderRadius in my screenshot) in the component inspector
section, the displayed number updates unbearably slowly.
<img width="653" alt="image"
src="https://github.com/user-attachments/assets/159bac67-2bef-4e4f-bf5e-d5fcfc704687">

The reason is that the slider and number are actually two separate
controls, and the number control only gets its state updated in low
priority mode once the interaction is finished.

**Fix:**
Use a shared local state for the value we immediately set while using
the slider.

**Commit Details:**
- Use `usePropControlledStateV2` as shared local state for the transient
updates

**Bonus mini fixes:**
- wrap RemixNavigationBar in LowPriorityState
- speeding up Tooltip / tippy

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../src/components/editor/canvas-toolbar.tsx  |   5 +-
 .../property-control-controls.tsx             |  31 +++-
 ...performance-regression-tests.spec.tsx.snap | 160 +++++++++---------
 editor/src/uuiui/tooltip.tsx                  | 102 +++++------
 4 files changed, 154 insertions(+), 144 deletions(-)

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
index d7c42dcc9670..9ebb819f7aa5 100644
--- a/editor/src/components/editor/canvas-toolbar.tsx
+++ b/editor/src/components/editor/canvas-toolbar.tsx
@@ -72,6 +72,7 @@ import {
   keyToString,
   shortcutDetailsWithDefaults,
 } from './shortcut-definitions'
+import { LowPriorityStoreProvider } from './store/store-context-providers'
 
 export const InsertMenuButtonTestId = 'insert-menu-button'
 export const InsertOrEditTextButtonTestId = 'insert-or-edit-text-button'
@@ -579,7 +580,9 @@ export const CanvasToolbar = React.memo(() => {
           )
         : null}
       {/* Live Mode */}
-      {showRemixNavBar ? wrapInSubmenu(<RemixNavigationBar />) : null}
+      <LowPriorityStoreProvider>
+        {showRemixNavBar ? wrapInSubmenu(<RemixNavigationBar />) : null}
+      </LowPriorityStoreProvider>
     </FlexColumn>
   )
 })
diff --git a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
index 2925f9ba8ee3..3012824768e8 100644
--- a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
+++ b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
@@ -1,5 +1,6 @@
 import fastDeepEquals from 'fast-deep-equal'
 import React from 'react'
+import ReactDOM from 'react-dom'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { isRight } from '../../../../core/shared/either'
 import { isJSXElement } from '../../../../core/shared/element-template'
@@ -69,6 +70,7 @@ import type { DEPRECATEDSliderControlOptions } from '../../controls/slider-contr
 import { StringControl } from '../../controls/string-control'
 import { UIGridRow } from '../../widgets/ui-grid-row'
 import { HtmlPreview, ImagePreview } from './property-content-preview'
+import { usePropControlledStateV2 } from '../../common/inspector-utils'
 
 export interface ControlForPropProps<T extends RegularControlDescription> {
   propPath: PropertyPath
@@ -492,9 +494,26 @@ const NumberWithSliderControl = React.memo(
     },
   ) => {
     const { propName, propMetadata, controlDescription } = props
+    const { onTransientSubmitValue, onSubmitValue } = propMetadata
 
     const controlId = `${propName}-slider-property-control`
-    const value = getValueOrUndefinedFromPropMetadata(propMetadata) ?? 0
+    const valueComingFromProps = getValueOrUndefinedFromPropMetadata(propMetadata) ?? 0
+
+    const [valueToShow, setValueToShow] = usePropControlledStateV2(valueComingFromProps)
+
+    const onChangeValue = React.useCallback(
+      (value: any, transient: boolean = false) => {
+        ReactDOM.flushSync(() => {
+          setValueToShow(value)
+        })
+        if (transient) {
+          onTransientSubmitValue(value)
+        } else {
+          onSubmitValue(value, transient)
+        }
+      },
+      [setValueToShow, onTransientSubmitValue, onSubmitValue],
+    )
 
     return (
       <UIGridRow padded={false} variant={'<--------auto-------->|--45px--|'}>
@@ -502,10 +521,10 @@ const NumberWithSliderControl = React.memo(
           key={`${controlId}-slider`}
           id={`${controlId}-slider`}
           testId={`${controlId}-slider`}
-          value={value}
-          onTransientSubmitValue={propMetadata.onTransientSubmitValue}
-          onForcedSubmitValue={propMetadata.onSubmitValue}
-          onSubmitValue={propMetadata.onSubmitValue}
+          value={valueToShow}
+          onTransientSubmitValue={onChangeValue}
+          onForcedSubmitValue={onChangeValue}
+          onSubmitValue={onChangeValue}
           controlStatus={propMetadata.controlStatus}
           controlStyles={propMetadata.controlStyles}
           DEPRECATED_controlOptions={props.controlOptions}
@@ -514,7 +533,7 @@ const NumberWithSliderControl = React.memo(
           id={`${controlId}-number`}
           testId={`${controlId}-number`}
           key={`${controlId}-number`}
-          value={value}
+          value={valueToShow}
           onTransientSubmitValue={propMetadata.onTransientSubmitValue}
           onForcedSubmitValue={propMetadata.onSubmitValue}
           onSubmitValue={propMetadata.onSubmitValue}
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 0bd2ca37513e..911b3ef6a132 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -183,10 +183,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/Icon/img",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -206,11 +206,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -232,7 +232,7 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-fix-problems-button'",
-  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-contract-dropdown'",
   "/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div))/div:data-testid='editor-contract-dropdown'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -379,7 +379,7 @@ Array [
   "/div/div//Symbol(react.memo)()",
   "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
-  "/div///UtopiaSpiedClass(Tooltip)",
+  "/div///UtopiaSpiedFunctionComponent(Tooltip)",
   "/div///Symbol(react.memo)()",
   "/div///div",
   "//div//Symbol(react.memo)(NumberInput)",
@@ -395,9 +395,9 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
-  "//div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "//div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div:data-testid='radius-cycle-mode'",
   "/div/div//Symbol(react.memo)()",
@@ -462,10 +462,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -484,11 +484,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -596,7 +596,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -831,7 +831,7 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-fix-problems-button'",
-  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-contract-dropdown'",
   "/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div))/div:data-testid='editor-contract-dropdown'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -978,7 +978,7 @@ Array [
   "/div/div//Symbol(react.memo)()",
   "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
-  "/div///UtopiaSpiedClass(Tooltip)",
+  "/div///UtopiaSpiedFunctionComponent(Tooltip)",
   "/div///Symbol(react.memo)()",
   "/div///div",
   "//div//Symbol(react.memo)(NumberInput)",
@@ -994,9 +994,9 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
-  "//div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "//div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div:data-testid='radius-cycle-mode'",
   "/div/div//Symbol(react.memo)()",
@@ -1137,7 +1137,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -1268,16 +1268,16 @@ Array [
   "////UtopiaSpiedExoticType(Symbol(react.provider))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -1412,7 +1412,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -1602,10 +1602,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -1624,11 +1624,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -1735,16 +1735,16 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -1812,10 +1812,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -1834,11 +1834,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -1929,7 +1929,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -2041,10 +2041,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -2063,11 +2063,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2132,10 +2132,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -2154,11 +2154,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2262,16 +2262,16 @@ Array [
   "////UtopiaSpiedExoticType(Symbol(react.provider))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -2398,7 +2398,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -2657,16 +2657,16 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -2793,7 +2793,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
diff --git a/editor/src/uuiui/tooltip.tsx b/editor/src/uuiui/tooltip.tsx
index cd3e281da7f9..477c9f383391 100644
--- a/editor/src/uuiui/tooltip.tsx
+++ b/editor/src/uuiui/tooltip.tsx
@@ -17,63 +17,51 @@ export interface TooltipProps {
   textColor?: string
 }
 
-function tooltipPropsEqual(
-  a: React.PropsWithChildren<TooltipProps>,
-  b: React.PropsWithChildren<TooltipProps>,
-): boolean {
-  return (
-    a == b ||
-    (a.title === b.title &&
-      a.placement === b.placement &&
-      a.disabled === b.disabled &&
-      a.children === b.children)
-  )
-}
+export const Tooltip: React.FunctionComponent<React.PropsWithChildren<TooltipProps>> = (props) => {
+  const backgroundColor = props.backgroundColor ?? colorTheme.neutralInvertedBackground.value
+  const textColor = props.textColor ?? colorTheme.neutralInvertedForeground.value
 
-export class Tooltip extends React.Component<React.PropsWithChildren<TooltipProps>> {
-  shouldComponentUpdate(nextProps: React.PropsWithChildren<TooltipProps>): boolean {
-    return !tooltipPropsEqual(this.props, nextProps)
-  }
+  const css = React.useMemo(
+    () =>
+      ({
+        fontWeight: 400,
+        fontSize: 11,
+        textAlign: 'center',
+        fontFamily:
+          "utopian-inter, -apple-system, BlinkMacSystemFont, Helvetica, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        backgroundColor: `${backgroundColor} !important`,
+        color: `${textColor} !important`,
+        '& .tippy-content': {
+          padding: '4px 8px !important',
+        },
+        '&[data-placement^=top] .tippy-arrow::before': {
+          borderTopColor: `${backgroundColor} !important`,
+        },
+        '&[data-placement^=right] .tippy-arrow::before': {
+          borderRightColor: `${backgroundColor} !important`,
+        },
+        '&[data-placement^=bottom] .tippy-arrow::before': {
+          borderBottomColor: `${backgroundColor} !important`,
+        },
+        '&[data-placement^=left] .tippy-arrow::before': {
+          borderLeftColor: `${backgroundColor} !important`,
+        },
+      } as const),
+    [backgroundColor, textColor],
+  )
 
-  render() {
-    const backgroundColor = this.props.backgroundColor ?? colorTheme.neutralInvertedBackground.value
-    const textColor = this.props.textColor ?? colorTheme.neutralInvertedForeground.value
-    return (
-      <Tippy
-        css={{
-          fontWeight: 400,
-          fontSize: 11,
-          textAlign: 'center',
-          fontFamily:
-            "utopian-inter, -apple-system, BlinkMacSystemFont, Helvetica, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-          backgroundColor: `${backgroundColor} !important`,
-          color: `${textColor} !important`,
-          '& .tippy-content': {
-            padding: '4px 8px !important',
-          },
-          '&[data-placement^=top] .tippy-arrow::before': {
-            borderTopColor: `${backgroundColor} !important`,
-          },
-          '&[data-placement^=right] .tippy-arrow::before': {
-            borderRightColor: `${backgroundColor} !important`,
-          },
-          '&[data-placement^=bottom] .tippy-arrow::before': {
-            borderBottomColor: `${backgroundColor} !important`,
-          },
-          '&[data-placement^=left] .tippy-arrow::before': {
-            borderLeftColor: `${backgroundColor} !important`,
-          },
-        }}
-        arrow
-        disabled={this.props.disabled}
-        content={this.props.title}
-        placement={this.props.placement ?? 'top'}
-        delay={[500, 0]} // [show, hide] milliseconds
-        animation='fade'
-        theme='material'
-      >
-        {this.props.children}
-      </Tippy>
-    )
-  }
+  return (
+    <Tippy
+      css={css} // TODO we should not use Emotion for this component
+      arrow
+      disabled={props.disabled}
+      content={props.title}
+      placement={props.placement ?? 'top'}
+      delay={[500, 0]} // [show, hide] milliseconds
+      animation='fade'
+      theme='material'
+    >
+      {props.children}
+    </Tippy>
+  )
 }