Unexpected positioning of the Tooltip when the horizontal collision property is set to flip

[georgi-sla]

Description

Currently, when the horizontal attribute of the collision property of the Tooltip is set to flip, and there is not enough space for the Tooltip to be rendered on the right side of the target element, the position of the Tooltip is correctly flipped but it is rendered above the target element thus hiding it.

Steps To Reproduce

1. Render a specific DOM element next to the right side of the viewport.
2. Apply the TooltipDirective to it.
3. Set the position of the Tooltip to right.
4. Set the horizontal attribute of the collision property to flip.
5. Set the title of the target element and ensure that it cannot be wrapped in the remaining space of the viewport.
6. Hover over the target element.

Please, check out the following StackBlitz demo: https://stackblitz.com/edit/angular-6fcwuntr-glbartvb

Screenshots or video

No response

Actual Behavior

The Tooltip is correctly flipped but is rendered above the target element and thus makes it not visible on the screen.

Seems to be related to: #3292

Expected Behavior

Apart from flipping the Tooltip, it should be positioned in such a manner that it does not hide the target element.

Browser

All

Browser version

latest

OS type

MacOS

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response