Skip to content

Tooltip: Inconsistencies Part 2 of 2 #42911

Description

@RachelElysia

Continuation of #38179.

Goal

User story
As a Fleet frontend engineer,
I want the app on a single react-tooltip version,
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:

  • <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

  • 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

  1. Engineer: Added comment to user story confirming successful completion of test plan.
  2. QA: Added comment to user story confirming successful completion of test plan.
  3. 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":

Metadata

Metadata

Assignees

Labels

#g-auto-patchingProduct group focused on auto patching softwarestoryA user story defining an entire feature~engineering-initiatedEngineering-initiated story, such as a bug, refactor, or contributor experience improvement.~frontendFrontend-related issue.

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions