Problems with clr-tooltip when clrPosition is not explicitly set

[tsvetomirnik]

Describe the bug

There is a rendering issue with tooltips when the clrPosition property is not explicitly set (on the clr-tooltip-content).

How to reproduce

It can be seen in https://clarity.design/documentation/tooltips > Angular Components > Examples > Right:

Show GIF with flickering content

Steps to reproduce the behavior:

1. Open the stackblitz https://stackblitz.com/edit/clarity-with-clr-angular-ui-3zkuc9
2. Hover over the first ⓘ icon

Actual behavior

The tooltip's content flashes over the ⓘ icon. When the icon is focused the content stays open but it's misaligned.

Expected behavior

The tooltip's content should appear on the right of the ⓘ icon (the default direction for the angular component).

Versions

Clarity version:

• v12.x
• v13.x

Framework:

• Angular
• React
• Vue

Framework version:
Angular 14

Additional notes

The workaround is to set the clrPosition:

<clr-tooltip>
    <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
    <clr-tooltip-content clrPosition="right" *clrIfOpen>
        <span>Lorem ipsum sit</span>
    </clr-tooltip-content>
</clr-tooltip>

[github-actions]

🎉 This issue has been resolved in version 13.10.0 🎉

The release is available on:

• GitHub release
• v13.10.0

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.