fix(core/tooltip): cutoff near viewport edges

[matthiashader]

💡 What is the current behavior?

• If a tooltip gets to near to the view port edge the tooltip will get cutoff
• It seems that the PR from [IX-901] leads to an issue, where the border-radius will not get adapted
• Issue relates to: Flickering when using flip alongside placement positions floating-ui/floating-ui#2632

GitHub Issue Number: Closes #740, [IX-849], [IX.1206]

🆕 What is the new behavior?

• Tooltip will automatically gets placed (if there isn't enough space)
• Border radius gets inherited
• updates floating-ui/dom to 1.6.10
• resetted position internally before asigning new one.

Note

• computePosition also return a top property, when 'fallbackAxisSideDirection' is set, this result in missplacement of the arrow -> will be reset
• Potential source:

• As the postion is set during computing and the middlewareData is deepmerged, this can result in the unwanted top property -> As postion = 'top' doesn't need the property, it has been removed (if its really necessary, this could also be checked)

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

• 🦮 Accessibility (a11y) features were implemented
• 🗺️ Internationalization (i18n) - no hard coded strings
• 📲 Responsiveness - components handle viewport changes and content overflow gracefully
• 📄 Documentation was reviewed/updated (pnpm run docs)
• 🧪 Unit tests were added/updated and pass (pnpm test)
• 📸 Visual regression tests were added/updated and pass (Guide)
• 🧐 Static code analysis passes (pnpm lint)
• 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

[changeset-bot]

🦋 Changeset detected

Latest commit: 1e4020c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@siemens/ix	Patch
@siemens/ix-angular	Patch
@siemens/ix-react	Patch
@siemens/ix-vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Report of strictNullChecks (strictPropertyInitialization) check

Typescript check

Total errors are the same in both branches

ESLint check

Total ESLint warnings are the same in both branches

[danielleroux]

Fix cause a flicker effect using the steps: #1228

Here a runnable example code:

export class PlaygroundInternal {
  componentDidLoad() {
    const content = document.createElement('DIV');
    content.style.display = 'flex';
    content.style.marginTop = '600px';
    content.style.marginBottom = '600px';
    content.innerHTML = `
      <input checked id="checkbox_1_1" name="group_1" type="checkbox" />
      <label for="checkbox_1_1"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</label>
      <div id="test" style="display: block; width: 5rem; height: 5rem; background: red">
      </div>
      <ix-tooltip style="align-self: flex-start;" for="#test">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </ix-tooltip>
    `;

    showModal({
      content: content,
    });
  }

  render() {
    return <Host></Host>;
  }
}