Page MenuHomePhabricator

jx-tooltip does whatever it feels like
Closed, ResolvedPublic

Assigned To
None
Authored By
avivey
Mar 29 2016, 12:44 AM
Referenced Files
F3029400: pasted_file
Feb 18 2017, 8:13 AM
F3029371: pasted_file
Feb 18 2017, 8:13 AM
F2566782: Screen Shot 2017-02-03 at 11.23.41 AM.png
Feb 3 2017, 7:24 PM
F1832325: commencetojigglin.gif
Sep 15 2016, 3:14 PM
F1194399: pasted_file
Mar 29 2016, 12:44 AM
F1194395: pasted_file
Mar 29 2016, 12:44 AM

Description

I think this is mostly the algorithm in https://secure.phabricator.com/diffusion/P/browse/master/webroot/rsrc/js/core/ToolTip.js;6dc30ecc8ef1006b4b2614ae7e0506414c49722b$140-156, but my browser's thick scrollbars might also be involved:

It looks like the algorithm just looks for a corner that is somewhat on the screen, instead of checking that all corners are.

In https://secure.phabricator.com/uiexample/view/PHUIObjectItemListExample/, the top-most tooltip resolves to South:

pasted_file (152×167 px, 8 KB)

But most of the other ones goes East:

pasted_file (110×114 px, 4 KB)

I've tried hacking 20px off the getViewport, to compensate for the scrollbars, and it didn't do anything useful.

(I'm using Chrome on Windows)

Event Timeline

Are you always seeing this render in a bad location or is it only sometimes? I regularly see the first rendered hovercard located way off to the left but it's only the first hovercard that tries to render -- and it's usually only the first hovercard after starting up Firefox. I haven't found reproducible steps so I haven't bothered to report it yet, but I wonder if it's related to this. I primarily use (the most recent) Firefox so it may be just browser. Using Cmd/Ctrl+Refresh doesn't cause it to affect again - manually restarting Firefox is also not a surefire way to reproduce.

I always see it like this (Chrome/Windows); I've dug a little in the algorithm, and I think it's using location relative to the page for the calculation, which is why the first (top-most) tooltip acts differently than all the rest.

It's probably only noticeable in the case of ObjectItem with an avatar, which is on the eastern-front and defaulting East.

There's also the whole "are scrollbars included in the window width" question that different browsers answer differently, because why not.

D14879 made hovercards smart about these sort of things (But hovercard don't have a little arrow thingy).

chad renamed this task from tooltip sometime show off-screen to jx-tooltip does whatever it feels like.Apr 1 2016, 9:09 PM

I think I got all of these, but yell if you catch any more.

Chrome:

  • Go to Workboard
  • Click Fullscreen
  • Hover over Fullscreen - tooltip is elsewhere?

Here's what I see:

Screen Shot 2017-02-03 at 11.23.41 AM.png (295×383 px, 18 KB)

Is that what you see?

Yeah I couldn't quite grab a screen

My trick is:

  • Press and hold Command + Shift.
  • Hover over the thing.
  • Press 4.
  • Drag-select the screen area.

If you do the first two steps in the normal order the tooltip vanishes when you press command/shift.

That tip probably does not fit on screen in any of the orientations: it obviously won't fit to the north or east. If we try to put it to the south, part of it will be offscreen to the right. If we try to put it to the west, part of it will be off the top of the screen (the rectangle we use to detect the size of the tip box is slightly larger than the actual pixel size of the tip because we get weird scrollbar interactions if we use the size of the tip exactly).

I think we're falling back to the default direction (north) and then maybe some kind of bug is happening.

One approach would be to not display the tip in this case.

Another approach would be to add a "southwest" orientation, although I think we can't (easily?) draw a pointer for that.

I think we currently don't really try to handle these cases:

  • Tooltip on a tiny thing (something smaller than a tooltip) in a corner of the screen (as here).
  • Tooltip on an element which is larger than the entire screen.

Some more shenanigans:

I can't make the tooltip to off the screen any more, which is great. But now the little pointer may point to the wrong direction:

Here it's good and proper:

pasted_file (292×284 px, 12 KB)

But scroll the page so that the target is very near the top or bottom edge (And the right edge as well, obviously):

pasted_file (155×279 px, 8 KB)