Avalonia icon indicating copy to clipboard operation
Avalonia copied to clipboard

Tooltip flickering in certain conditions

Open KillyMXI opened this issue 2 years ago • 4 comments

Describe the bug Tooltip can be placed in such way, so it gets under the pointer, causing flicker.

To Reproduce

  • Use a tooltip with rich content (part of it loads with a delay, affecting tooltip size)
  • Use placement: Pointer
  • Put tooltipped control near bottom edge of the screen
  • Hover mouse over it
  • When there is just enough space for the initial size of the tooltip but not enough for updated tooltip - it starts to flicker.

My guess is that when tooltip is updated, a logic to keep it on-screen is computed, but the logic to place it relative to the mouse pointer is ignored.

  • If the tooltip is pushed up from the screen edge - it gets under the cursor hiding the tooltipped control.
  • If the tooltip is placed above the cursor initially and then updated to grow downwards - it gets between the tooltipped control and the pointer as well.

If I move mouse to the left (staying over the control) while tooltip is flickering, I can get to the point where the resized tooltip no longer gets under the cursor and stops flickering.

I tried to use IsHitTestVisible="False" on tooltip contents but that made no difference.

Expected behavior

Tooltip placement should probably be computed to not intersect with the cursor at each redraw (full placement logic on all redraws).

I thought it might be possible to offset the initial position in such way so the growing tooltip can't occlude with the cursor, but that would also require to limit the directions in which the tooltip can grow, and there are some more edge cases.

As a simple workaround, it would suffice for my use case to ignore screen edges intersection when the tooltip is updated (relax placing conditions on following redraws). (Update: I realized this on itself won't fix the issue when the tooltip is drawn above the pointer and then grown downwards.)

Maybe IsHitTestVisible="False" for the whole tooltip can work (at least with placement: Pointer).

Screenshots

  • dynamic behavior, can't capture on a screenshot.

Desktop (please complete the following information):

  • OS: Windows 10
  • Version 0.10.18

KillyMXI avatar Oct 19 '22 18:10 KillyMXI

Hey @KillyMXI can you test this in a simple sample targeting the latest prerelease of Avalonia?

Maybe this issue was already solved, but I am not 100 % sure.

timunie avatar Oct 23 '22 10:10 timunie

I made a sample: https://github.com/KillyMXI/AvaloniaUI_issue_9246

It doesn't behave the same way as my app, probably because stripped down code makes the tooltip to disappear faster. So, with 0.10.18, I can't see the flicker, rather I can't see the tooltip at all when near the bottom edge of the screen.

11.0.0-preview2 seems to behave much better. If the tooltip collided with the cursor - next time it appears at a safe location and stays visible. With only one exception - tooltip is not visible when the cursor in the bottom right corner of the screen. Feel free to close this issue if you think the remaining corner case does not worth to be addressed.

I won't be migrating the code written for the client to the preview version at the 11th hour. As a workaround, I switched to Placement=Top. That works correctly even around the top edge of the screen.

KillyMXI avatar Oct 27 '22 20:10 KillyMXI

Honestly I think if the mouse is over the ToolTip it should still be visible. But others have to finally decide. I also don't know how hard it is to implement.

timunie avatar Oct 27 '22 20:10 timunie

Thanks for the sample btw 👍

timunie avatar Oct 27 '22 20:10 timunie

Version 11 preview 4, Windows 11 - still not completely solved

If one chooses to manually set the tooltip placement (in my case to 'Top'), 50% of the time when hovering over the button, it pulses approximately 2 times per second (when it should show the tooltip but doesn't).

It is like the focus of the button is toggling between the button and the tooltip (it cannot show), resulting in flickering ...

No movement of the mouse is required, even then it will keep pulsing forever.

I'm not entirely sure, but I have the impression that when the mouse point is over the content (an image in my case) it happens more frequently. (Edit) Checked this a little more and it is not correct, it also happens on the content.(End Edit)

If I do not set the placement manually, all works fine.

GMas0124816 avatar Jan 25 '23 09:01 GMas0124816

@maxkatz6 what do you think about this solution? https://github.com/AvaloniaUI/Avalonia/pull/10931 Code can be improved but in a nutshell, it should work fine.

ltetak avatar Apr 06 '23 13:04 ltetak

@ltetak does this PR solve the same problem? https://github.com/AvaloniaUI/Avalonia/pull/10645

maxkatz6 avatar Apr 06 '23 13:04 maxkatz6

@maxkatz6 not exactly. This solves the problem when you hover over the tooltip. #10645 solves the problem when you press the mouse on the original control (not the tooltip). This problem is quite significant if you have tooltips near the edge of the screen. The tooltip will show over the mouse and immediately disappear, then reappear, flickering in and out. The bigger the tooltip the easier is to get near the edge.

ltetak avatar Apr 06 '23 19:04 ltetak