Context
While adding tooltips to icon-only buttons in the page-header (PR #5345 follow-up branch feature/ui-missing-tooltips), two facts surfaced:
- Two tooltip mechanisms in tree —
CustomTooltipDirective (selector [matTooltip], ~36 .html files use it) and a single native HTML title="" on the theme-toggle button. The theme-toggle case is the only native holdout in the page chrome.
- CustomTooltipDirective's current visual style is heavier than the OS-native equivalent — 12px font, 8px×12px padding, opaque
#333 background. The native browser tooltip on the theme-toggle is visibly lighter and more compact, which reads better against both light and dark page backgrounds.
We picked the custom directive over native for three reasons that should stay: 250ms show delay (vs ~1.5s native), consistent OS/browser appearance, and themeability under dark/light. The fix is to polish the directive's look — not switch mechanisms.
Scope
src/frontend/packages/core/src/shared/components/custom-tooltip/custom-tooltip.directive.ts
- Font size 12px → 11px
- Padding 8px×12px → 4px×8px
- Background
#333 → semi-transparent black (e.g. rgba(0,0,0,0.78)) so it doesn't render heavy on light page backgrounds
- Consider reading a CSS custom property for the background so the value can vary across light/dark themes via the existing theme variables (cf. theme-toggle for a peer that already swaps style by mode)
src/frontend/packages/core/src/shared/components/theme-toggle/theme-toggle.component.html
- Replace
title=\"Toggle theme ({{ getLabel() }})\" with matTooltip=\"Toggle theme ({{ getLabel() }})\"
- Add
CustomTooltipDirective to the component's imports[]
- Result: a single mechanism handles all tooltips across stratos
Why deferred
The team has a hard sequencing pin on V2 retirement + remaining @ngrx removal waves landing first. This is small visual polish on top of a working mechanism — not blocking any user. Picking it up mid-V2-or-ngrx work risks dragging attention off the load-bearing migration.
Acceptance
- All 36 (+ theme-toggle = 37) tooltip sites render with the new lighter style
- Native browser tooltip no longer used anywhere in the page chrome
- Visual parity verified across both light and dark themes
- No regression in show delay / positioning / auto-flip behavior
Context
While adding tooltips to icon-only buttons in the page-header (PR #5345 follow-up branch
feature/ui-missing-tooltips), two facts surfaced:CustomTooltipDirective(selector[matTooltip], ~36 .html files use it) and a single native HTMLtitle=""on the theme-toggle button. The theme-toggle case is the only native holdout in the page chrome.#333background. The native browser tooltip on the theme-toggle is visibly lighter and more compact, which reads better against both light and dark page backgrounds.We picked the custom directive over native for three reasons that should stay: 250ms show delay (vs ~1.5s native), consistent OS/browser appearance, and themeability under dark/light. The fix is to polish the directive's look — not switch mechanisms.
Scope
src/frontend/packages/core/src/shared/components/custom-tooltip/custom-tooltip.directive.ts#333→ semi-transparent black (e.g.rgba(0,0,0,0.78)) so it doesn't render heavy on light page backgroundssrc/frontend/packages/core/src/shared/components/theme-toggle/theme-toggle.component.htmltitle=\"Toggle theme ({{ getLabel() }})\"withmatTooltip=\"Toggle theme ({{ getLabel() }})\"CustomTooltipDirectiveto the component'simports[]Why deferred
The team has a hard sequencing pin on V2 retirement + remaining @ngrx removal waves landing first. This is small visual polish on top of a working mechanism — not blocking any user. Picking it up mid-V2-or-ngrx work risks dragging attention off the load-bearing migration.
Acceptance