Dynamic adjusting tooltip content position on hovering tooltip--Angular 17

I want to show some content on hovering tooltip icon.

Eg: label with this icon(!). Total Fund value (!). I want to show some content in a box of fixed width of 286px, On hovering icon.

The label can be small or longer then the above example. The content should auto adjust it position according to the surrounding space.

I tried different approach

1. Given the content fixed top and left value for one label but this approach doesn't work for every cases and if the label is present at the any corner of the screen then it is overflowing.
2. I have taken the icon offsetTop and offsetBottom property value also. But this doest work as well.

This is my html structure.

<div class="tooltip-container">
<div class="flex flex-row align-center">
<label>{{label}}</label>
<img src="tooltio.svg" (click)="onClick($event)"/>
</div>

<div class="content">
<p>{{content}}</p>
</div>
</div>

Continue reading...