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