How to make the position of the arrow on a Material Tool tip dynamic?

I have this template from which I'm calling the mat tool tip

<i class="characteristic-tooltip-icon"
#informationToolTip="matTooltip"
refxPopover
[ngClass]="'informative' | icon"
[matTooltip]="characteristic.additionalInformationKey | o3rTranslate:characteristic.additionalInformationArgs"
[attr.aria-label]="characteristic.additionalInformationKey | o3rTranslate:characteristic.additionalInformationArgs"
(click)="informationToolTip.toggle()">
</i>


The common style for this tooltip is here:

.mat-mdc-tooltip {
background: $o3r-color-accent-A100 !important;
border-radius: .5rem;
margin-top: 1.125rem;
margin-inline-start: 1rem;

.mdc-tooltip__surface {
background-color: transparent !important;
padding: .75rem;
font-size: .75rem !important;
}
}

.mat-mdc-tooltip-panel-below {
.mat-mdc-tooltip {
&::before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: $o3r-color-accent-A100;
display: block;
transform: translate(0, -50%);
bottom: 100% !important;
left: 50%;

[dir='rtl'] & {
right: 50%;
}
}
}
}

.mat-mdc-tooltip-panel-above {
.mat-mdc-tooltip {
&::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 100% !important;
left: 50%;
border: 8px solid transparent;
border-top-color: $o3r-color-accent-A100;
display: block;
transform: translate(-50%, 0);

[dir='rtl'] & {
right: 50%;
}
}
}
}


As you can see the arrow points upward and downward accordingly. But the position of the arrow always stays in the middle(fixed).

The arrow should also point correctly to the content it is popping from

Can you guys help me out here?

As far as I've understood, The left property should be adjusted dynamically. I couldn't find solutions out there on how to do it. ChatGPT is overkilling it, and it doesn't work. Help me out

Continue reading...