How to make the position of the arrow on a Material Tool tip dynamic (The arrow should point...

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

Template code:

<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.

failing_case

As you can see when it is the edge of the screen, since the whole tooltip moves, the arrow doesn't look convincing.

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...