Files
fleet/changes/44325-gitops-mode-tooltip-label
T
Carlo 25a57c7808 Fix tooltips to center of label row (#47861)
**Related issue:** Resolves #44325

## Summary

In GitOps mode, disabled settings fields show a "Manage in YAML (GitOps
mode)" tooltip via `GitOpsModeTooltipWrapper`. The wrapper passed the
entire field (label + input + help text) to the shared `TooltipWrapper`,
so react-tooltip anchored to the whole field's bounding box. For
`position="left"`/`"right"` fields this centered the tooltip vertically
across the field, landing the arrow between the input and the help text
instead of at the label.

This change anchors the tooltip to the field's label/control row (via
react-tooltip-5 `anchorSelect` scoped to a unique wrapper id), so the
arrow points at the label regardless of input, help-text, or
tooltip-content length. The change is contained to
`GitOpsModeTooltipWrapper`, leaving `TooltipWrapper` untouched.
Non-field usages (buttons, icon rows) fall back to the previous
whole-element anchoring.

# Checklist for submitter

  - [x] Changes file added for user-visible changes in `changes/`.

  ## Testing

  - [x] Added/updated automated tests
  - [x] QA'd all new/changed functionality manually

Verified manually with Playwright against a live instance in GitOps
mode: the tooltip arrow points at the checkbox/control row (incl. fields
with help text) and at the label for `isInputField` inputs; button
usages are unchanged.

<img width="1726" height="1041" alt="Screenshot 2026-06-18 at 15 31 08"
src="https://github.com/user-attachments/assets/58229743-58d4-4b26-b69d-c78ca2e6b3b1"
/>
<img width="1721" height="1040" alt="Screenshot 2026-06-18 at 15 30 58"
src="https://github.com/user-attachments/assets/253db973-2a57-4f62-9d6f-2d18f0c2a7ca"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Corrected GitOps mode tooltip positioning for disabled settings
fields. Tooltips now properly target field labels instead of the
combined label/input/help element area, improving visual alignment and
clarity.

* **Tests**
* Enhanced test coverage for GitOps mode tooltip anchoring with tests
for single form fields and grouped field controls to ensure correct
positioning behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-19 07:15:05 -04:00

2 lines
152 B
Plaintext

- Fixed the GitOps mode tooltip on disabled settings fields so it points at the field's label instead of the center of the label, input, and help text.