From ec42e2d4167a578cfbca4116f0a3bf75db5f6d9b Mon Sep 17 00:00:00 2001
From: Juan Fernandez <juan-fdz-hawa@users.noreply.github.com>
Date: Fri, 30 May 2025 19:02:58 -0400
Subject: [PATCH] Fixes 29044: UI bug due to missing style for tooltip.
 (#29556)

For #29044

Fixed styling issues with 'Observers can run this query' tooltip on the queries page.
---
 changes/29044-add-missing-tooltip-styles      |  1 +
 .../queries/ManageQueriesPage/_styles.scss    |  3 --
 .../QueriesTable/QueriesTableConfig.tsx       | 37 +++++++------------
 3 files changed, 14 insertions(+), 27 deletions(-)
 create mode 100644 changes/29044-add-missing-tooltip-styles

diff --git a/changes/29044-add-missing-tooltip-styles b/changes/29044-add-missing-tooltip-styles
new file mode 100644
index 0000000000..65535be880
--- /dev/null
+++ b/changes/29044-add-missing-tooltip-styles
@@ -0,0 +1 @@
+* Fixed bug with the 'Observers can run this query' tooltip due to missing styling rules.
\ No newline at end of file
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index 4f6db83cda..311baaf752 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@@ -105,9 +105,6 @@
               .inherited-badge {
                 overflow: initial;
               }
-              .observer-can-run-badge {
-                @include tooltip5-arrow-styles;
-              }
             }
 
             @media (max-width: $break-md) {
diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
index da9ad2a521..a640e2ba23 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTableConfig.tsx
@@ -154,30 +154,19 @@ const generateColumnConfigs = ({
             suffix={
               <>
                 {!isCurrentTeamObserverOrGlobalObserver && observer_can_run && (
-                  <div className="observer-can-run-badge">
-                    <span
-                      className="observer-can-run-icon"
-                      data-tooltip-id={`observer-can-run-tooltip-${id}`}
-                    >
-                      <Icon
-                        className="observer-can-run-query-icon"
-                        name="query"
-                        size="small"
-                        color="core-fleet-blue"
-                      />
-                    </span>
-                    <ReactTooltip5
-                      className="observer-can-run-tooltip"
-                      disableStyleInjection
-                      place="top"
-                      opacity={1}
-                      id={`observer-can-run-tooltip-${id}`}
-                      offset={8}
-                      positionStrategy="fixed"
-                    >
-                      Observers can run this query.
-                    </ReactTooltip5>
-                  </div>
+                  <TooltipWrapper
+                    tipContent="Observers can run this query."
+                    underline={false}
+                    showArrow
+                    position="top"
+                  >
+                    <Icon
+                      className="observer-can-run-query-icon"
+                      name="query"
+                      size="small"
+                      color="ui-fleet-black-50"
+                    />
+                  </TooltipWrapper>
                 )}
                 {viewingTeamScope &&
                   // inherited