[tooltip] When using botom / top position, overlay can be partially outside viewport

[web-padawan]

Description

Extracted from #7744

The root cause of the above issueisn't specific to vaadin-grid but applies to tooltip using any top or bottom position (with position set to end, the overlay is correctly flipped and shown at the start).

Expected outcome

• Maybe the tooltip shouldn't be shown in this case?
• Or maybe it should be at least fit to the viewport?

Note: we do have IntersectionObserver responsible to handle this, but it uses threshold: 0 which means that tooltip is only hidden when the element is fully invisible (IIRC that's intentional).

Minimal reproducible example

Here's a code example (to reproduce, ).

<script type="module">
  import '@vaadin/button';
  import '@vaadin/tooltip';
</script>

<div style="display: flex; width: 1000px; overflow: auto">
  <vaadin-button style="margin-left: auto">
    Edit
    <vaadin-tooltip slot="tooltip" text="Click to edit"></vaadin-tooltip>
  </vaadin-button>
</div>

Steps to reproduce

1. Resize window to < 1000px width
2. Scroll to make button partially visible
3. Move mouse over the button to show tooltip

Environment

Vaadin version(s): 24.x and earlier

Browsers

Issue is not browser related

[yuriy-fix]

@rolfsmeds, what do you think? Should the tooltip be hidden in this case or should we alternatively force a different position?

[rolfsmeds]

I think it would make sense for the overlay to be shifted just enough to fit into the viewport (and if needed completely disregard the configured position relative to the target).