[tooltip] Ensure there is only one tooltip visible at the same time

[web-padawan]

Describe your motivation

Originally reported at https://github.com/vaadin/web-components/issues/4463#issuecomment-1235433473

In some cases, e.g. in vaadin-avatar-group it's especially easy to have two overlapping tooltips:

https://user-images.githubusercontent.com/10589913/189609544-a5befdce-fa6d-490c-a856-ea513028ae2b.mp4

<vaadin-avatar-group max-items-visible="4"></vaadin-avatar-group>

<script type="module">
  import '@vaadin/avatar-group';

  const group = document.querySelector('vaadin-avatar-group');
  group.items = [{ name: 'AA' }, { name: 'BB' }, { name: 'CC' }, { name: 'DD' }, { name: 'EE' }, { name: 'FF' }];
</script>

This is caused by the fact that currently, there can be 2 open tooltips: one on hover and another one on focus.

Describe the solution you'd like

Ideally, there should be no more than one tooltip visible at any given time.

Consider restoring the closing behavior originally prototyped at #4392.