Describe the bug
The Tooltip is not correctly positioned in scenarios where a longer text needs to be displayed. This incorrect positioning leads to the inability to automatically close the Tooltip when the mouse is hovered out of the component.

To Reproduce

1. Open this CodeSandbox example.
2. Hover the yellow dot on the right

Expected behavior
The Tooltip should appear correctly positioned above the yellow point as it is in the scenario when you hover the left point in the above example

Screenshots

@open and @close events are not triggered by integration testing tool, even when programmatically calling the event.

We are using cypress 11.1.0

cypress-real-events: 1.7.4 was also used to try of trigger the events but didn't work.

The way we try this was by:

cy.get(element).trigger(‘mouseover’)
cy.get(element).realHover()
cy.get(element).trigger(‘mouseover’)
cy.get(element).trigger(‘mouseenter’)
cy.get(element).then(el => {
    el.dispatchEvent(new MouseEvent(‘mouseenter’, { bubbles:true })
}

Describe the bug
The Native Tooltip is not hiding when the mouse cursor is moved fast from the target element in the direction where the Tooltip is about to appear.

To Reproduce

1. Open this StackBlitz
2. Hover the Button and move fast the mouse cursor to right(covering the area of the Tooltip)
3. Repeat step 2 multiple times if the Tooltip hides

Expected behavior
The Tooltip should disappear when the mouse cursor is moved away from the target element no matter the direction in which the cursor is moved.

Screenshots

Tooltip stays opened when the mouse is in and our fast and it goes through the tooltip itself. video in ticket - 1563700
https://stackblitz.com/edit/vue-cyjfhr?file=src%2FApp.vue

Describe the bug
Then using the Native Tooltip with Icon tag or SVG, the component is displayed aside from the hovered element.

To Reproduce

1. Open this StackBlitz example
2. Hover either the Icon element or the SVG

Expected behavior
The Tooltip should appear exactly below the hovered element.

Screenshots
Icon:

SVG: