Fleet UI: Some of many tooltip updates to react-tooltip 5.x by RachelElysia · Pull Request #42830 · fleetdm/fleet

RachelElysia · 2026-04-01T18:17:06Z

Issue

Closes #38179

Description

Update a bunch of tooltips (~21 instances)
Was timeboxing to a 2 but really did about 1.5 days of this. Used Claude code to try to update 70 instances but it only caught like 30 >.< Then spent all the time updating the code correctly while testing.
A lot of tests needed updates because the 250ms delay needs a async await to see the tooltip
Removed 2 unused old components

Testing

Added/updated automated tests
QA'd all new/changed functionality manually

claude

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

RachelElysia · 2026-04-01T18:26:00Z

frontend/pages/SoftwarePage/components/tables/VulnerabilitiesCell/VulnerabilitiesCell.tsx

 import React from "react";
-import { uniqueId } from "lodash";
-import ReactTooltip from "react-tooltip";
+import { PlacesType } from "react-tooltip-5";


RachelElysia · 2026-04-01T18:31:45Z

frontend/pages/policies/PolicyPage/components/PolicyForm/PolicyForm.tsx

-                        !isExistingPolicy || isAnyPlatformSelected
-                      }
-                    >
+                  <TooltipWrapper


RachelElysia · 2026-04-01T18:36:38Z

frontend/pages/policies/PolicyPage/components/SaveNewPolicyModal/SaveNewPolicyModal.tsx

-            data-tip-disable={disableForm}
-            className="autofill-tooltip-wrapper"
-          >
+        <TooltipWrapper


RachelElysia · 2026-04-01T18:37:52Z

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

 // definitions for the selection row for some reason when we dont really need it.
 import React from "react";
 import { CellProps, Column } from "react-table";
-import ReactTooltip from "react-tooltip";


RachelElysia · 2026-04-01T18:39:54Z

frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx

-                      data-for="live-query-button"
-                      // Tooltip shows when live queries are globally disabled
-                      data-tip-disable={!isLiveQueryDisabled}
+                    <TooltipWrapper


RachelElysia · 2026-04-01T18:47:06Z

frontend/components/ProbabilityOfExploit/ProbabilityOfExploit.tsx

-          data-tip
-          data-for={tooltipId}
-        >
+      <TooltipWrapper


RachelElysia · 2026-04-01T18:53:16Z

frontend/components/TableContainer/DataTable/LiveQueryIssueCell/LiveQueryIssueCell.tsx


 import Icon from "components/Icon";
-import { COLORS } from "styles/var/colors";
+import TooltipWrapper from "components/TooltipWrapper";


tested

Note: Had to update styling to use gap instead of left margin because the left margin was making the tooltip slightly offcentered

RachelElysia · 2026-04-01T18:56:09Z

frontend/components/TableContainer/DataTable/PerformanceImpactCell/PerformanceImpactCell.tsx


-import ReactTooltip from "react-tooltip";
-import { COLORS } from "styles/var/colors";
+import TooltipWrapper from "components/TooltipWrapper";


Updated so the undetermined tooltips are 8px above the text, but the pills which have the dark ovals around them have tooltips that are 12 px above the text

RachelElysia · 2026-04-01T19:07:58Z

frontend/pages/hosts/components/IssuesIndicator/IssuesIndicator.tsx

@@ -1,53 +1,51 @@
 import React from "react";
+import { PlacesType } from "react-tooltip-5";


tested

Note: icon wasn't aligning vertically centered without CSS using the new tooltip on the host details page so I added a stylesheet for this component

RachelElysia · 2026-04-01T19:15:27Z

frontend/components/TableContainer/DataTable/TextCell/TextCell.tsx

 import React from "react";
-import ReactTooltip from "react-tooltip";
-import { COLORS } from "styles/var/colors";
+import TooltipWrapper from "components/TooltipWrapper";


This required a CSS change to ensure empty cell didn't italicize the tooltip

tested

RachelElysia · 2026-04-01T19:26:02Z

frontend/components/TableContainer/TableContainer.tsx

-                  backgroundColor={COLORS["tooltip-bg"]}
-                  id="search-tooltip"
-                  data-html
+                <TooltipWrapper


tested

Note: Had to update strings to <br/> in better spots since TooltipWrapper has a max width larger than the previous ReactTooltip

RachelElysia · 2026-04-01T19:32:58Z

...ges/admin/IntegrationsPage/cards/Integrations/components/IntegrationForm/IntegrationForm.tsx


 import Spinner from "components/Spinner";
-import { COLORS } from "styles/var/colors";
+import TooltipWrapper from "components/TooltipWrapper";


RachelElysia · 2026-04-01T19:40:30Z

...es/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingStatusCell/OSSettingStatusCell.tsx

-              id={tooltipId}
-              data-html
-            >
+          <TooltipWrapper


Not tested as I don't have a host with OS Settings in my dev environment
Please test thank you!

tested

Where to find this instance:

RachelElysia · 2026-04-01T19:47:58Z

frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx

 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 import Icon from "components/Icon";
 import NotSupported from "components/NotSupported";
+import TooltipWrapper from "components/TooltipWrapper";


tested

Note: text was higher than tooltip without CSS align-items: center;, also able to remove tooltip css

RachelElysia · 2026-04-01T19:51:45Z

frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/ReportUpdatedCell.tsx

-import ReactTooltip from "react-tooltip";
-import { COLORS } from "styles/var/colors";
 import Icon from "components/Icon";
+import TooltipWrapper from "components/TooltipWrapper";


this is no longer rendered in the UI as of 4.84 with the new ReportCard's card UI -- I don't know why the dev didn't remove this when updating the UI, so I'm going to keep it with an update.

RachelElysia · 2026-04-01T20:10:18Z

.../cards/Software/SelfService/components/UpdatesCard/UpdateSoftwareItem/UpdateSoftwareItem.tsx

-            >
-              {displayConfig.displayText}
-            </Button>
+      <TooltipWrapper


tested

Note: Also updated this so the failed button looks similar to the update button when hovered (see screenshot)

RachelElysia · 2026-04-01T20:13:20Z

frontend/components/FeedListItem/FeedListItem.tsx

          </span>
          <br />
-          <span
+          <TooltipWrapper


RachelElysia · 2026-04-01T20:56:20Z

...admin/IntegrationsPage/cards/MdmSettings/VppPage/components/VppTable/TeamsCell/TeamsCell.tsx

 import TextCell from "components/TableContainer/DataTable/TextCell";
-import { uniqueId } from "lodash";
-import ReactTooltip from "react-tooltip";
+import TooltipWrapper from "components/TooltipWrapper";


Couldn't test this since I couldn't get VPP in my dev environment

Please test manually <3

@cdcme - I was able to test this once I got unblocked attaching my VPP token (apparently I didn't know how to read a secondary nested menu as a menu)

tested

😂 Ok great,ty!

codecov · 2026-04-02T14:06:20Z

Codecov Report

❌ Patch coverage is 78.43137% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.80%. Comparing base (2af049d) to head (5942a7c).
⚠️ Report is 68 commits behind head on main.

Files with missing lines	Patch %	Lines
...ataTable/LiveQueryIssueCell/LiveQueryIssueCell.tsx	0.00%	4 Missing ⚠️
...ons/components/IntegrationForm/IntegrationForm.tsx	0.00%	2 Missing ⚠️
...mponents/SaveNewPolicyModal/SaveNewPolicyModal.tsx	33.33%	1 Missing and 1 partial ⚠️
...tables/VulnerabilitiesCell/VulnerabilitiesCell.tsx	85.71%	1 Missing ⚠️
.../hosts/details/HostDetailsPage/HostDetailsPage.tsx	0.00%	1 Missing ⚠️
...atesCard/UpdateSoftwareItem/UpdateSoftwareItem.tsx	85.71%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #42830   +/-   ##
=======================================
  Coverage   66.80%   66.80%           
=======================================
  Files        2537     2540    +3     
  Lines      203683   203707   +24     
  Branches     9254     9265   +11     
=======================================
+ Hits       136062   136085   +23     
- Misses      55297    55299    +2     
+ Partials    12324    12323    -1

Flag	Coverage Δ
frontend	`54.78% <78.43%> (+0.03%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

RachelElysia and others added 2 commits April 1, 2026 12:59

Fleet UI: Update tooltip wrapper

86e203b

Updates to more tooltips

14b433f

RachelElysia requested a review from a team as a code owner April 1, 2026 18:17

claude bot reviewed Apr 1, 2026

View reviewed changes

RachelElysia marked this pull request as draft April 1, 2026 18:17

RachelElysia had a problem deploying to Docker Hub April 1, 2026 18:17 — with GitHub Actions Failure

RachelElysia commented Apr 1, 2026

View reviewed changes

frontend/components/FeedListItem/FeedListItem.tsx

</span>

<br />

<span

<TooltipWrapper

Copy link
Copy Markdown

Member Author

RachelElysia Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested

Updates from testing

e61bc44

RachelElysia had a problem deploying to Docker Hub April 1, 2026 20:50 — with GitHub Actions Error

Revert tooltiptruncatedtextcell as it broke the functionality

ccd048f

RachelElysia had a problem deploying to Docker Hub April 1, 2026 20:53 — with GitHub Actions Error

Remove log

3b7bf4c

RachelElysia temporarily deployed to Docker Hub April 1, 2026 20:54 — with GitHub Actions Inactive

RachelElysia commented Apr 1, 2026

View reviewed changes

RachelElysia temporarily deployed to Docker Hub April 2, 2026 13:41 — with GitHub Actions Inactive

Update tests

9c87a34

RachelElysia force-pushed the 38179-tooltip-updates branch from e90d04f to 9c87a34 Compare April 2, 2026 14:03

RachelElysia temporarily deployed to Docker Hub April 2, 2026 14:03 — with GitHub Actions Inactive

Fix lint?

5942a7c

RachelElysia temporarily deployed to Docker Hub April 2, 2026 14:13 — with GitHub Actions Inactive

RachelElysia marked this pull request as ready for review April 2, 2026 14:15

RachelElysia assigned iansltx and cdcme Apr 2, 2026

cdcme approved these changes Apr 2, 2026

View reviewed changes

RachelElysia merged commit 226df92 into main Apr 2, 2026
18 of 19 checks passed

RachelElysia deleted the 38179-tooltip-updates branch April 2, 2026 17:32

		@@ -1,53 +1,51 @@
		import React from "react";
		import { PlacesType } from "react-tooltip-5";

Conversation

RachelElysia commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

Description

Testing

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RachelElysia Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RachelElysia Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RachelElysia Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

RachelElysia commented Apr 1, 2026 •

edited

Loading

RachelElysia Apr 1, 2026 •

edited

Loading

RachelElysia Apr 1, 2026 •

edited

Loading

RachelElysia Apr 1, 2026 •

edited

Loading

codecov bot commented Apr 2, 2026 •

edited

Loading