From 54e03522d57b268fe9293068da7ec29c995ace64 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 29 Mar 2024 10:51:35 -0700
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20restore=20arrow=20to=20left-po?=
 =?UTF-8?q?sitioned=20dropdown=20tooltip=20(#17950)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #17949
<img width="705" alt="Screenshot 2024-03-28 at 5 18 35 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9e33c768-8687-4201-8961-b2f8839a2b71">


- [x] Manual QA for all new/changed functionality

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 .../policies/ManagePoliciesPage/ManagePoliciesPage.tsx   | 4 ++++
 frontend/pages/policies/ManagePoliciesPage/_styles.scss  | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
index a49d276128..494b26cd2d 100644
--- a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
@@ -788,7 +788,9 @@ const ManagePolicyPage = ({
             place="left"
             positionStrategy="fixed"
             offset={24}
+            opacity={1}
             disableStyleInjection
+            classNameArrow="tooltip-arrow"
           >
             Available in Fleet Premium
           </ReactTooltip5>
@@ -806,7 +808,9 @@ const ManagePolicyPage = ({
             place="left"
             positionStrategy="fixed"
             offset={24}
+            opacity={1}
             disableStyleInjection
+            classNameArrow="tooltip-arrow"
           >
             Select a team to manage
             <br />
diff --git a/frontend/pages/policies/ManagePoliciesPage/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/_styles.scss
index 3c88a2db1c..1453d7e5ee 100644
--- a/frontend/pages/policies/ManagePoliciesPage/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/_styles.scss
@@ -42,6 +42,15 @@
           font-style: normal;
           text-align: center;
         }
+
+        // arrow styles directly from react-tooltip-5 css
+        .tooltip-arrow {
+          width: 8px;
+          height: 8px;
+        }
+        [class*="react-tooltip__place-left"] > .tooltip-arrow {
+          transform: rotate(315deg);
+        }
       }
     }
     .Select-control {