MBS-12459: Mimic native tooltip position offset

[jesus2099]

Problem

Timeline custom tooltips are very nice but they are always partially covered by my mouse cursor.
I have noticed that the timeline custom tooltips were closer to the mouse than were the native tooltips (<*** title="native tooltip">).

See MBS-12459 for before/after photos on Windows 10.

Solution

I changed the timeline.js custom tooltip position offset to match the position, relative to mouse cursor, of the native tooltip.

Checklist for review

• Test on Windows 10
• Test on Linux
• Test on Mac (if anyone can do this)
• Test on mobile (maybe custom tooltip will look too far away from the triggering line) (no native tooltip on mobile)

[jesus2099]

Wow, @yvanzo! You have tested the change on Linux, already? :)
Was it bad before? and better after?

[yvanzo]

Yes, it is slightly better than before as the cursor was sometimes (not always, it depends on when the event was triggered) hiding the beginning of the bubble.

Tested locally on Linux but I don’t think there will be any issue with desktop platforms anyway. It is more about dealing with smaller resolutions: tablets and mobiles.

I pushed this commit to the test branch and deployed it in the hope that everyone could test it with their own device from https://test.musicbrainz.org/statistics/timeline/main. Unfortunately, I couldn’t load the statistics data in the test database for now, so you will have to wait a bit.

[jesus2099]

Hi @yvanzo,
Now I see that you managed to load some data now in TEST so we can compare with MBS side by side!!
Thank you very much! 👍 👍 👍

[jesus2099]

On mobile, or more precisely, when there is no mouse cursor, it was clearly looking better before my change:

Arrow

Before

After

Hand

Here is a little bit special because you already cannot really use this feature conveniently.
As soon as you click a milestone (red vertical line), a new tab opens to show you the related detailed webpage.
It's when you close this info tab, that you can see the tooltip.

Before

After

[yvanzo]

On mobile, or more precisely, when there is no mouse cursor, it was clearly looking better before my change

This page is clearly not supporting mobile at the moment; See the overlapping date labels on the horizontal axis for example.

Being able to read the first letters of the tooltips on desktop seems to overcome the slightly increased distance on mobile.

[yvanzo]

Tests really are about desktop/mobile thus skipped testing on mac as it has already been tested on two desktop platforms.

[jesus2099]

Thank you!