Long tooltips may not fit vertically, and we flip them upwards even if they won't fit upwards either

[mstange]

No description provided.

[julienw]

This is made very visible when zoomed in (ctrl +) with high tooltips (like the ones with causes).

We should always try to keep the top aligned with the top of the window.

[gregtatum]

What is the desired outcome here? The information will be truncated regardless of what we do. I'm going to remove the bug label, as the polish and accessibility seem to be the proper labels, but this is not truly breaking things for our users, as some information is hidden anyway. I'm happy to add the bug label back if someone disagrees.

I think a better "steps to reproduce" profile would be helpful to determine the course of action.

Perhaps if we overflow the height, we need to fit the tooltip to be the size of the vertical window, and then truncate the contents.

[julienw]

Some information is hidden anyway, but I think the most important information is hidden while the less important is shown.

I find it easy to see on this profile, the STR is:

1. zoom in the page (ctrl +) several times
2. reduce the height of your browser window
3. hover on top of "reflow" markers (you can search them using the excellent search field)
4. If everything looks normal, try zooming in a bit more, or reduce the browser window's height more, and try again.

[julienw]

Note that I agree it's a "polish" bug.

[mstange]

I propose the following positioning scheme:

1. If the tooltip fits between the mouse and the window's bottom edge, position the tooltip's top edge at the mouse.
2. Otherwise, if the tooltip fits between the window's top edge and the mouse, position the tooltip's bottom edge at the mouse.
3. Otherwise, if the tooltip fits between the window's top edge and the window's bottom edge, position the tooltip's bottom edge at the window's bottom edge.
4. Otherwise, position the tooltip's top edge at the window's top edge.

[julienw]

This sounds good; except maybe we don't need the 3rd step and could move to 4th step directly.

[julienw]

The logic is in src/shared/Tooltip.js's render function.

[subashiniganesh]

Hello @julienw ,

I am introduced to Outreachy and about this project today via Outreachy website. Is it too late to start? May I please attempt on this issue and try to make a Pull Request?

[julienw]

He @subashiniganesh, sure, it's not late at all !

Are the information in this issue good enough or do you need some more things to start working on this ?

[subashiniganesh]

Hello @julienw ,

The information provided in the issue was very much helpful. Thanks a lot. I am happy that I was able to pick and attempt an accessibility related issue as the primary project is about improving accessibility. Let me please submit a PR. Kindly help me for any improvements.

[julienw]

No answer from @subashiniganesh so let's mark this issue as unassigned. Please look at the existing PR #1326 to start working on this.

[gregtatum]

Including @bgrins steps to reproduce (STR) here from #1462:

STR

• Open https://perfht.ml/2RF2Qtl
• Hover the style marker

I can see just the bottom of "Styles reused" metadata, but there's more interesting stuff above about the number of elements traversed / matched / etc. If the tooltip doesn't have enough space I'd rather see the top of it and have the bottom stack portion get clipped.

[julienw]

Because this is blocking some gecko devs, I'll finish up the existing PR.