Wp-calypso: Editor: empty tooltips displaying on editor (Firefox)

[meremagee]

Steps to reproduce

I'm not able to reproduce consistently, but I saw what looks like an empty tool tip over the scheduler upon returning to editor after my computer had been asleep. I later saw it when loading notifications over editor in the region atop these guys: https://cloudup.com/cXMlnUEQY-q but wasn't quick enough to grab a screenshot. These phantom tooltips seem to show while a component is in a loading state and disappear after a couple seconds.

[designsimply]

Tested and confirmed. I can also see something similar happening in the stats insights calendar. To reproduce the bug, try swooshing the mouse over two active buttons in a row really fast while a page is still loading. Seems more prevalent in Firefox to me than other browsers.

Video: 47s
^{Seen at https://wordpress.com/post/design5279.wordpress.com/10035 using Firefox 46.0 on Mac OS X 10.11.4}

[lancewillett]

Thanks for your notes, @designsimply.

Question for you @meremagee: does it happen when you hover your mouse over quickly? Could be a "hover intent" behavior where there's not enough delay on the interaction.

Or, are they just present on the screen with no mouse movement at all?

[lancewillett]

I saw this today when using wpcalypso with Firefox stable on OS X 10.11.4, on a test site lancetest35.wordpress.com/

Steps to repeat:

1. Start a blog post or edit a draft.
2. Click publish.
3. Just after you click the publish button move the mouse right (over and away from the publish button).
4. You'll see the tooltip appear. I think this corresponded with a console error NetworkError: A network error occurred.
5. It disappears once the post publishes.

I wasn't able to capture it in a screencast, but will keep trying. This is where I ended up just after:

[lancewillett]

I tried the same steps again, wasn't able to reproduce. But did see the same network error.

[lancewillett]

Got it! It has to be a previously edited post, saved as a draft.

[meremagee]

Just got one of these lil things to persist!

[lancewillett]

Without even knowing how it works code-wise, my guess is the tip is empty of text and this looks broken — data is missing in the view.

[thehenrybyrd]

Seeing the same thing in stats/day view. Very similar experience to @designsimply's video above.

Steps to reproduce:

1. Load https://wordpress.com/stats/day/
2. Run the mouse wildly from one end of the days to another.
3. Try it again, a bit more intentionally, but still quickly.

I didn't see any console errors occur during this process.

Gif: https://cloudup.com/cUcNsGGokc7
Seen at https://wordpress.com/stats/day/ahbusinesstest.wordpress.com using Chrome 50.0.2661.94 on Mac OS X 10.10.5

[thehenrybyrd]

Here's a user reporting this in Edge and Chrome: 2663631-t
Lots of screenshots, and user is describing the same experience:
"when I move the mouse across the graph it seems the info box at the bottom sticks"

[travisw]

I'm also able to reproduce this in the stats/days section and it is a very similar element on the page that persists. Just a couple of different classes compared to @meremagee screenshot above.
I'm using Chrome Version 50.0.2661.102 (64-bit)

[designsimply]

Spotted another case of a phantom tooltip on the "Edit Post URL" icon, just to the left of the title field in the Editor, see 23s.

[juliaamosova]

User in 2663631-t already mentioned above sent more screenshots in order to help investigate the issue further:

[juliaamosova]

More screenshots from user in 2663631-t already mentioned above:

[meremagee]

Had another visitor in the editor today: https://cloudup.com/c7cqjgYonqE

[dcoleonline]

More screenshots from user in 2663631-t already mentioned above:

[dcoleonline]

Another report in 404123-chat from a different user on Windows Vista using FIrefox 47.
They weren't able to make a screenshot, so I asked them to use a different browser for now.

[rralian]

I was able to reproduce this pretty easily in firefox by loading a stats page (viewing days) and then just moving my mouse quickly back and forth over the different days. The result I get is a ton of extra empty tooltip artifacts in the html.

I think the event that we are relying upon to clean up the tooltips just isn't reliably firing. It's worse in firefox, but I can get it to happen in chrome as well with some vigorous shaking of the cursor. (curse you cursor!)

I suspect this may be a bug/limitation of the component-tip npm module that we rely upon. Maybe we need to fix it at the source, or maybe we need to write our own. I see some Automatticians have our names all over that module, so maybe one of them can check it out? @ockham @TooTallNate @retrofox

[ockham]

Maybe we need to fix it at the source, or maybe we need to write our own.

IMO ideally we'd replace it with something more React-ish (and thus e.g. SSR compatible), see #4072.

[rralian]

I've added "high" priority because this seems to be a rather common bug in firefox. It was certainly very simple for me to recreate.

[gwwar]

This should be fixed by #7217

[rralian]

Thanks for taking this on @retrofox, was a big project, and I think this significantly improves the user experience. Nice work! 🎆

[designsimply]

Tested and confirmed I can no longer reproduce the bug where phantom tooltips would show up in Firefox when you moused over various popover areas. w00t! Thanks @retrofox!