From 63fc159151e185e2c35271ea5562172ced979d77 Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Tue, 17 Dec 2024 10:44:45 -0800
Subject: [PATCH] fix(ui): Bring back tooltip arrows (#82241)

---
 static/app/components/tooltip.spec.tsx | 13 ++++++++++++-
 static/app/components/tooltip.tsx      |  7 +++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/static/app/components/tooltip.spec.tsx b/static/app/components/tooltip.spec.tsx
index 08544dd20aa2d8..6889317a0968cc 100644
--- a/static/app/components/tooltip.spec.tsx
+++ b/static/app/components/tooltip.spec.tsx
@@ -25,12 +25,23 @@ describe('Tooltip', function () {
     jest.clearAllMocks();
   });
 
-  it('renders', function () {
+  it('renders', async function () {
     render(
       <Tooltip delay={0} title="test">
         <span>My Button</span>
       </Tooltip>
     );
+
+    await userEvent.hover(screen.getByText('My Button'));
+    expect(screen.getByText('test')).toBeInTheDocument();
+
+    // Check that the arrow svg is rendered
+    expect(document.querySelector('svg')).toBeInTheDocument();
+
+    await userEvent.unhover(screen.getByText('My Button'));
+    await waitFor(() => {
+      expect(screen.queryByText('test')).not.toBeInTheDocument();
+    });
   });
 
   it('updates title', async function () {
diff --git a/static/app/components/tooltip.tsx b/static/app/components/tooltip.tsx
index 9c0903fb5b07d4..ff54ec98321ffa 100644
--- a/static/app/components/tooltip.tsx
+++ b/static/app/components/tooltip.tsx
@@ -1,6 +1,5 @@
 import {createContext, Fragment, useContext, useEffect} from 'react';
 import {createPortal} from 'react-dom';
-import isPropValid from '@emotion/is-prop-valid';
 import type {SerializedStyles} from '@emotion/react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -92,9 +91,9 @@ function Tooltip({
   );
 }
 
-const TooltipContent = styled(Overlay, {shouldForwardProp: isPropValid})<{
-  maxWidth?: number;
-}>`
+const TooltipContent = styled(Overlay, {
+  shouldForwardProp: prop => prop !== 'maxWidth',
+})<{maxWidth?: number}>`
   padding: ${space(1)} ${space(1.5)};
   overflow-wrap: break-word;
   max-width: ${p => p.maxWidth ?? 225}px;