Skip to content

[Repo Assist] Use Popover API for code snippet tooltips; fix scroll-offset positioning#1061

Draft
github-actions[bot] wants to merge 2 commits intomainfrom
repo-assist/improve-popover-tooltips-804beaa-613ba4f90485b3ec
Draft

[Repo Assist] Use Popover API for code snippet tooltips; fix scroll-offset positioning#1061
github-actions[bot] wants to merge 2 commits intomainfrom
repo-assist/improve-popover-tooltips-804beaa-613ba4f90485b3ec

Conversation

@github-actions
Copy link
Contributor

@github-actions github-actions bot commented Mar 2, 2026

🤖 This PR was created by Repo Assist, an automated AI assistant.

Closes #422

Summary

Migrates hover tooltips (the div.fsdocs-tip elements shown when hovering over syntax tokens in code blocks) to use the browser-native [Popover API]((developer.mozilla.org/redacted), with a clean fallback for older browsers.

Changes

src/FSharp.Formatting.CodeFormat/HtmlFormatting.fs

Add the popover attribute to every generated div.fsdocs-tip element:

(div class="fsdocs-tip" id="fstips3")...(/div)

(div popover class="fsdocs-tip" id="fstips3")...(/div)

docs/content/fsdocs-tips.js

  • Popover API path (modern browsers, Baseline 2024): set position: fixed, then call el.showPopover() / el.hidePopover(). Elements in the top layer are always rendered above all other page content — no z-index arithmetic needed.
  • Fallback path (older browsers): retain existing position: absolute + display: block/none behaviour unchanged.
  • Bug fix: the right-edge overflow correction used y instead of x as the base for the left-shift; corrected to x.
  • Bug fix: currentTipElement was never cleared on hide; now set to null together with currentTip.

docs/content/fsdocs-default.css

Add div.fsdocs-tip:popover-open { display: block; } so the author-level display: none rule does not suppress the Popover API reveal (author rules take precedence over UA rules in the cascade). Also add margin: 0 to prevent UA default popover margins from shifting the tooltip.

Why the Popover API?

Property Old (JS absolute positioning) New (Popover API)
Rendering layer Normal stacking context — needs z-index: 1000 Browser top layer — always above everything
Positioning on scroll Bug: clientX/Y used with position: absolute → offset when scrolled Correct: clientX/Y used with position: fixed in top layer
Keyboard dismiss Manual document.onkeydown handler Built-in Escape key handling for auto popovers
Browser support All [Baseline 2024]((developer.mozilla.org/redacted) (Chrome 114+, Firefox 125+, Safari 17+)

Test Status

  • ✅ Build: dotnet build src/FSharp.Formatting.CodeFormat/ — 0 warnings, 0 errors
  • ✅ Tests: dotnet test tests/FSharp.CodeFormat.Tests/ — 20 passed, 2 skipped (pre-existing infrastructure skips)
  • ✅ Formatting: Fantomas check on changed .fs file — no changes needed
  • ⚠️ Visual verification: manual testing of hover tooltips, light-dismiss (Escape), and scroll-position accuracy recommended before merge

Generated by Repo Assist for issue #422

Generated by Repo Assist

To install this agentic workflow, run

gh aw add githubnext/agentics/workflows/repo-assist.md@da02dddebe71d9a937665abdcd1f5214dab852a7

- Add `popover` attribute to `div.fsdocs-tip` elements in HtmlFormatting.fs,
  placing them in the browser top layer when supported (Baseline 2024).
- Update fsdocs-tips.js to call showPopover()/hidePopover() on browsers that
  support the Popover API; fall back to display:block/none on older browsers.
- Switch to `position: fixed` in the Popover API path (correct for top-layer
  elements) and fix a scroll-offset bug where tooltips appeared at wrong
  positions when the page was scrolled.
- Fix a minor bug in the right-edge overflow correction (was using `y` instead
  of `x` as the base for the left-shift calculation).
- Add `div.fsdocs-tip:popover-open { display: block }` to fsdocs-default.css
  so author-level display:none does not suppress the Popover API reveal.
- Update RELEASE_NOTES.md.

Closes #422

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CSS tooltips as an alternative (or replacement) for JS tooltips

0 participants