High - Tooltips cause screen flicker

[PhilBarrett]

Tooltips for buttons in the header appear to cause the screen to flicker when hovering over the buttons they belong to. https://www.youtube.com/watch?v=wDyVHM0Yn-I

I think this is caused by the positioning properties of the tooltips, which cause the vertical scroll bars to appear and disappear.

React appears to create a div at the end of the document to display the tooltip

Linked to https://github.com/RippleOSI/NHS_Ed_Scotland_Open_Platform/issues/106

[BogdanScherban]

@simongamester

Simon, could you please help me with this issue?

I can't understand the reason of this behavior and I tried to prevent it, but it was unsuccessful.

[simongamester]

I can see this might be difficult to fix. It only seems to happen when the screen being loaded DOESN'T have a vertical scroll bar. If you look at TOC for example, it works fine because this page has a lot of content on it:

https://showcase-devra.ripple.foundation/#/toc/create

I can see that the tooltip element is appended to the body, but I can't see what's inside it with dev tools:

2 ideas on how to proceed:

1. Can you target the tooltip div above to appear div within the layout class instead of the end of the body? This has a height: 100vh, so anything displayed outside of this will force the scrollbars to appear.

2. Alternatively, if you can't do the above, a quick fix would be to increase the height of the 'layout' div above to 101vh. This would force vertical scroll bars on all screens, but would resolve the flicker (which I think is more important).

[BogdanScherban]

@simongamester

Thanks, Simon - it works!!! The issue has been done.

[kuvakina]

@tony-shannon @PhilBarrett

Tested Showcase-devra: the issue is solved

Tested nes-dev and london: the issue is present. Should Bogdan add fixes there too?

[simongamester]

@kuvakina @PhilBarrett @tony-shannon Looking at Showcase, I think @BogdanScherban applied approach 2 from my earlier suggestion, so only a small css change to the layout div. Should only be a single line css change for implement to the other versions.

@BogdanScherban Was there a reason why you couldn't implement approach 1 i.e. targeting the div for the tooltip within the layout div?

[BogdanScherban]

@simongamester

Simon, could you please explain with code example, what do you mean in the first variant: "target the tooltip div above to appear div within the layout class instead of the end of the body"

[simongamester]

@BogdanScherban When a tooltip is generated in the system, the html containing the text for the tooltip is added immediately before the end of the BODY tag, see example below.

https://drive.google.com/open?id=1CKnEOltifWiDIBEhi1yEgQU2Vr2WJjSI

Notice the extra html that is added at the bottom right of the screen.

Is it possible to get the tooltip html to be moved so it sits just before the end of the DIV with the 'layout' class, the one you see below:

[BogdanScherban]

@simongamester

Simon, could you please give me permission to this video?

Yes, I knew about this problem, and I tried to find a solution. I mean extra div with span, when we hover an icon...

But I didn't find a solution for this, and used second method (101vh) to prevent flicking.

[simongamester]

OK understood.

Maybe there's another way to avoid the flicker. Instead of increasing the height to 101vh (to force a scrollbar), we could reduce to 98vh instead. This would mean the extra height taken up by the tooltip isn't ever enough to bring in the scroll bars.

Try updating the 101vh properties on these DIVs...

Layout DIV

Inner DIV

[BogdanScherban]

@simongamester

OK, I reduced to 98 - you can see at showcase-devra Flicking is absent.

[simongamester]

Much better!

@PhilBarrett Ok to mark as resolved now.