Block toolbar's handle tooltip misaligned

[ivukasinovic]

We have an issue with the tooltip.
It happens just on the initial loading of the page and while selecting the rich content (hovering over the handle).
After that hovers align correctly.

This is also an issue on the official example from here (check last image)

[Witoso]

Interesting, in our docs/demos it only happens on the first hover. @oleq / @Mati365 / @DawidKossowski, any ideas, I know you were in the tooltips area lately.

[ISilviu]

Interesting, in our docs/demos it only happens on the first hover

Indeed, could it happen because of a layout shift?

[Mati365]

@ISilviu I think so, probably editor is moving horizontally a bit during mounting and tooltip manager caches incorrectly start position of tooltip. @Witoso IMO it's internal CKEditor bug not related to React integration.

[ISilviu]

Shall we re-open the issue on their main repo then?

[Mati365]

@ISilviu yep

[Witoso]

Done.

[ISilviu]

Thank you!

[ISilviu]

Has anyone managed to have a look at it?

[Mati365]

@ISilviu Yep, it's queued. I'll take a look, probably tomorrow.

[Mati365]

Notes for further testing. It's fully reproducible in our demos.

Steps:

1. Edit this file https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-build-balloon-block/tests/manual/ckeditor-cjs-version.html#L1
2. Add margin and width to #editor div. Like this: <div id="editor" style="width: 400px; margin-left: 200px">
3. Open http://localhost:8125/ckeditor5-build-balloon-block/tests/manual/ckeditor-cjs-version.html
4. Hover balloon editor hamburger button and open tooltip.