You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
so that tooltip styling and behavior stay consistent across the product, preventing UI bugs from two tooltip libraries drifting apart, and we can drop the legacy dependency.
Context
Two widely-used components still import the old react-tooltip@4.2.21:
Everything else already uses react-tooltip-5 (npm:react-tooltip@5.29.1) with matching delay and styling. Consolidating on one version keeps tooltip behavior consistent across the product and prevents subtle regressions (delay, positioning, styling) as the two libraries drift.
Changes
Product
UI changes: No changes (visual parity with the react-tooltip-5 pattern already used elsewhere)
CLI (fleetctl) usage changes: No changes
YAML changes: No changes
REST API changes: No changes
Fleet's agent (fleetd) changes: No changes
Fleet server configuration changes: No changes
Exposed, public API endpoint changes: No changes
fleetdm.com changes: No changes
GitOps mode UI changes: No changes
GitOps generation changes: No changes
Activity changes: No changes
Permissions changes: No changes
Changes to paid features or tiers: No changes
My device and fleetdm.com/better changes: No changes
Usage statistics: No changes
Compatibility: No changes
Other reference documentation changes: No changes
First draft of test plan added
Once shipped, requester has been notified
Once shipped, dogfooding issue has been filed
Engineering
Test plan is finalized
Migrate <HumanTimeDiffWithDateTip /> to react-tooltip-5
Migrate <TooltipTruncatedTextCell /> to react-tooltip-5
Remove react-tooltip@4.2.21 and @types/react-tooltip from package.json; drop the **/react-tooltip/uuid resolution
Contributor API changes: No changes
Feature guide changes: No changes
Risk assessment
Risk level: Low
Risk description: Both components render in many places; regressions would be visual/hover-behavior only. No data or auth surface touched.
Test plan
Core flow
Spot-check <HumanTimeDiffWithDateTip /> across pages that show relative times (Hosts, Reports, Software, Fleets, activity feed). Tooltip appears on hover with correct delay, contents, and styling.
Spot-check <TooltipTruncatedTextCell /> in tables with truncated cells. Tooltip shows the full value on hover with the standard delay/styling.
Edge cases
Rapid mouse movement across table rows does not leave tooltips stuck open.
Tooltips render correctly inside modals and side panels (z-index / portal behavior).
Both components work inside virtualized/paginated tables after scroll.
Confirmation
Engineer: Added comment to user story confirming successful completion of test plan.
QA: Added comment to user story confirming successful completion of test plan.
QA: Determined whether this story needs Playwright automation.
Needs automation: Yes / No
If yes, filed a follow-up issue in the :help-qa project with status "Needs automation":
Continuation of #38179.
Goal
react-tooltipversion,Context
Two widely-used components still import the old
react-tooltip@4.2.21:<HumanTimeDiffWithDateTip />(frontend/components/HumanTimeDiffWithDateTip/HumanTimeDiffWithDateTip.tsx)<TooltipTruncatedTextCell />(frontend/components/TableContainer/DataTable/TooltipTruncatedTextCell/TooltipTruncatedTextCell.tsx)Everything else already uses
react-tooltip-5(npm:react-tooltip@5.29.1) with matching delay and styling. Consolidating on one version keeps tooltip behavior consistent across the product and prevents subtle regressions (delay, positioning, styling) as the two libraries drift.Changes
Product
Engineering
<HumanTimeDiffWithDateTip />toreact-tooltip-5<TooltipTruncatedTextCell />toreact-tooltip-5react-tooltip@4.2.21and@types/react-tooltipfrompackage.json; drop the**/react-tooltip/uuidresolutionRisk assessment
Test plan
Core flow
<HumanTimeDiffWithDateTip />across pages that show relative times (Hosts, Reports, Software, Fleets, activity feed). Tooltip appears on hover with correct delay, contents, and styling.<TooltipTruncatedTextCell />in tables with truncated cells. Tooltip shows the full value on hover with the standard delay/styling.Edge cases
Confirmation