Multiple React CTooltips make page height grow temporarily and produce flickering [CoreUI React Pro]

[Sonic1305]

The issue can be reproduced by just going fast from left to right over multiple buttons that have a tooltip and are close too each other.
If you have only one button, everything works fine but multiple tooltips cause problems.
I did not include any detailed project information as the issue can even be seen in the official documentation.

See https://coreui.io/react/docs/components/tooltip/ and go to

Just go fast from left to right on the buttons there and you can see the scrollbar flicker, as the page height changes. This issue is even more visible on applications without a vertical scrollbar.

This issue is either present since 5.0 or only in the pro version, as we used the 4.X free version before and did not have the issue. I did test multiple browsers, firefox worked best but only because the scrollbar is very thin and does not shrink the page when it appears. Still, the issue is present.

I am happy to provide more information if you need them, as this issue makes tooltips almost unusable on applications without a vertical scrollbar.

[mrholek]

@Sonic1305 This issue should be fixed in v5.1.0. Which browser do you use, and which OS?

[Sonic1305]

@Sonic1305 This issue should be fixed in v5.1.0. Which browser do you use, and which OS?

Sorry for the late answer, seems like I had my notifications turned off. We currently use version 5.2.1 and the issue is still present in all browsers we had available such as Edge, Chrome, Firefox or Vivaldi. As I said, I can even see it in the official docs, just look at the scrollbar. We exclusively use Windows 11 & Windows 10. I did test it on my private machine as well, same issue.

[Sonic1305]

We just found out this also happens on Popovers.

[mrholek]

@Sonic1305 I found a solution and will release it in the next version. Probably next week.

[mrholek]

@Sonic1305, the new version is ready to download.

[Sonic1305]

@Sonic1305, the new version is ready to download.

Thanks! We did some testing and the tooltip issue seems fixed. However, popovers still seem to cause the sidebar to appear when opened near the edge of the screen or, when not placed near the edge, every second time you open it.
Edit: I will still do some further testing to assure it is not cause of our code as our popovers are kinda complex and update you then.

[Sonic1305]

So we have popovers placed in the top right, near the avatar dropdown. Popovers that would potentially expand past the page width or height can cause flickering, if the popover has more stuff in the header, the chance for the flicker to occur seems to increase. Very simple popovers only cause a flicker very rarely but still repeatedly if you keep opening/closing them, issues which have a complex header cause flicker on almost every opening.
This isn't such a serious issue so take all the time you need, just wanted to update you about my findings.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions