web-components icon indicating copy to clipboard operation
web-components copied to clipboard

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

Open web-padawan opened this issue 1 year ago • 2 comments

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).

Screenshot 2024-09-03 at 15 02 25

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

web-padawan avatar Sep 03 '24 13:09 web-padawan