[components]: Tooltip refactoring

[gfellerph]

There are several issues concerning tooltips that need to be fixed with a refactoring for the tooltip component.

Current state

The PR #3196 tried to introduce a new structure to tooltips, that does not require any mutation observers to make the API more stable. It was created a while ago and is not in a mergeable state. The main goal was to get rid of mutation observers to make the implementation more performant and bullet-proof. According to the reviews from @alizedebray, a slotchange listener might still be necessary to ensure the correct aria attributes are set on the trigger element.

Issues

• Mutation observers for the attribute make the solution harder to implement than it needs to be, a wrapper custom element around the trigger provides us with a lifecycle hook to register event listeners and ensure accessibility on the trigger. This should fix Tooltips sometimes not showing #3042
• Mouse movement between the trigger and the tooltip is not consistent. The goal is to establish a safe area where the mouse can move from the trigger to the tooltip without closing the tooltip. This is currently achieved with an invisible border around the tooltip, but it does not work properly. A small gap results in the tooltip closing in some situations and staying open in others. Add optional safe triangle to <post-popovercontainer> #4169 should help fixing this issue and the border can be removed from the tooltip.
• The existing PR is so old that it cannot be merged easily anymore
• [to be discussed] Linking elements via id is not as practical as it often seems. Ids have to be unique on the page and in some cases, it's difficult to ensure uniqueness. Using a custom attribute, e.g. post-target and post-name has the benefit of not using built in attributes and is not limited by browser restrictions, although the requirements on uniqueness are similar since users need to be specific about which tooltip element needs to be targeted
• Boolean attributes should not be true by default, the tooltip arrow property breaks this rule

Tasks

Preview Give feedback

1. Add optional safe triangle to <post-popovercontainer> #4169
   0 of 1
   📦 components +1
   
2. Remove the need for mutation observers by introducing a tooltip-trigger element (breaking change)
3. Implement a safe space for the mouse to move between trigger and tooltip
4. Set a max-width for tooltips (same as for popover)
5. Make tooltip arrow property false by default

[gfellerph]

Resolution: use id to connect trigger and tooltip, alternatively a tooltip can be nested inside the trigger, removing the need for an id connection.