Improve the tooltip system

[MangelMaxime]

The current tooltip system does the job but is basic.

While navigating website generated by F# Formatting, I am often frustrated by the inconsistency in the tooltip system.

You can't go inside of the tooltip to select or copy something from it:

CleanShot.2024-12-30.at.21.21.55.mp4

The tooltip placement depends on where you initially place your mouse cursor:

CleanShot.2024-12-30.at.21.23.24.mp4

Working with tooltip is difficult, and could be a good candidate for an external library? Would you be ok with a proposition to use a library like Tippy.js for example?

I am proposing Tippy.js because it was one of the first result from Google and it seems to do what would be needed:

• HTML Content
• Allow interactive like hover / select
• Placement we could place it top-start to be similar to IDE behavior and it handle screen overflow

[nojaf]

Overall the tooltip mechanism is old and could get some love.
Would Tippy really solve your problem of not being able to copy past the text?
On the other hand https://css-tricks.com/css-anchor-positioning-guide/ might have good browser support somewhere this year, so the problem could also be solved without dependencies.

[MangelMaxime]

Would Tippy really solve your problem of not being able to copy past the text?

Setting the tooltip as Interactive seems to solve this issue yes:

CleanShot.2025-01-02.at.11.17.50.mp4

I was not aware of the CSS Anchor, but like you said current support is not good enough 72 % for Desktop. It also seems like this is more focus on popover than tooltip. What I mean is that most example, seems to work onClick and not onHover. The difficulty is that we will want to trigger the tooltip on Hover, but once you leave the hover text you are not in that state anymore. Perhaps, using a delay animation will allow the mouse to navigate from the text to the tooltip but for having done something similar in the past this is not always easy to get it right in term of term, UX and positionnement of the tooltip with overflow etc.

[nojaf]

I suppose we can try the Tippy thing.
You would need to change https://github.com/fsprojects/FSharp.Formatting/blob/main/docs/content/fsdocs-tips.js and probably some dotnet code that generates the html for the tips.
I'm unfamiliar with how that exactly works. There might be dragons.

[MangelMaxime]

@nojaf I came up with the same conclusion regarding the changes required I will have a look at it.

[MangelMaxime]

I will probably explore the tooltip rewrite once #929 is done.

This is because right now, there are some tooltips generated at placed which will not have tooltips anymore.

CleanShot.2025-01-02.at.20.21.06.mp4

[github-actions]

🤖 This is an automated response from Repo Assist.

Flagging that PR #1061 is now open, which uses the native Popover API for code-snippet tooltips. It addresses two of the main pain points raised here:

• Interactive / copyable content: the popover is a real DOM element users can enter and select text from.
• Positioning consistency: the anchor-relative positioning in [Repo Assist] Use Popover API for code snippet tooltips; fix scroll-offset positioning #1061 avoids the offset-from-scroll-position bug.

Popover API vs Tippy.js trade-offs:

	Native Popover API	Tippy.js
Dependencies	None	External JS (~15 kB gzipped)
Browser support	~93% (Chrome 114+, FF 125+, Safari 17+)	All browsers
Interactivity	Yes (via JS hover logic in PR #1061)	Yes (built-in)
Placement overflow	Manual JS	Automatic via Popper.js

The project's preference is to avoid new dependencies where native APIs suffice. The Popover API is now broadly supported and the PR #1061 approach keeps things dependency-free — worth reviewing if the implementation covers your use case.

Separately, @MangelMaxime mentioned planning to revisit the tooltip system once #929 is done. PR #932 (the #929 experiment) was recently closed on 2026-02-22 as a WIP. Once the signature-like format direction is settled, a deeper tooltip rewrite would be a natural next step.

Generated by Repo Assist · ◷

To install this agentic workflow, run

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

[github-actions]

🤖 This is an automated response from Repo Assist.

I've just opened a PR that directly fixes the interactivity issue described here: the tooltip now stays open when you move your mouse into it, so you can select and copy the text.

What changed:

• The mouseout handler on the trigger element now checks whether the mouse moved into the tooltip — if so, it keeps the tooltip open.
• A new mouseout handler on the tooltip itself hides it when the mouse leaves (but not when it returns to the trigger).
• CSS adds cursor: text and user-select: text to the open tooltip as a visual affordance.

The fix is purely JavaScript/CSS — no backend changes needed. Please see the draft PR on the branch repo-assist/fix-tooltip-interactive-2026-04-01 for the full diff.

Generated by 🌈 Repo Assist at {run-started}. Learn more.

To install this agentic workflow, run

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