fix: show tooltips when target is partially visible

[sissbruecker]

Description

Currently a tooltip is only shown when its target is fully visible. That is an issue with avatar for example, which uses a negative margin that can pull it out of its scroll container if put right at the edge of it. It can also be confusing that a tooltip doesn't show for an element where only a single pixel is scrolled outside of the view.

This change makes tooltips show if their target is partially visible (even just a single pixel). I considered using some magic number between 0 and 1 for the threshold, but again it could be confusing why tooltips show / hide based on different scroll positions, even though the element is effectively visible for the user.

Fixes vaadin/flow-components#5105

Type of change

• Bugfix

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[sissbruecker]

Removed this suite / test, as the test case should already be covered by the two previous tests.

[web-padawan]

The only problem I can think of is positioning tooltip for the partially visible element:

Could be reproduced with the following HTML in the dev page:

<style>
  #container {
    width: 200px;
    height: 200px;
    border: solid 1px #e2e2e2;
    overflow: scroll;
  }
</style>


<div id="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
  <button id="test">Test</button>
  <vaadin-tooltip text="Testing" for="test"></vaadin-tooltip>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt sapiente fuga unde dolore, harum voluptatibus, similique culpa illo quae eveniet esse. Adipisci omnis beatae delectus iure labore nihil velit quas.
</div>

[sissbruecker]

As discussed, let's go with the current approach for now. If the positioning turns out to be a problematic use-case then we can consider tweaking the visibility threshold or make the overlay positioning consider the intersection rectangle.

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.2.0.alpha1 and is also targeting the upcoming stable 24.2.0 version.