Currently, I am facing a peculiar issue with my angular web-application. Within the application, there is a matrix displaying data. When I hover over the data in this matrix, some basic information about the object pops up. Strangely, every time I hover over it with my cursor, the width changes from right to left.
This is how my HTML looks:
<table class="table table-bordered" style="margin-top: 22px">
<colgroup *ngFor="let y of yArray">
<col style="width: 5%" *ngFor="let x of xArray"/>
</colgroup>
<tr *ngFor="let y of yArray">
<td *ngFor="let x of xArray" [style.background]="getBackground(y+1,x+1)"
[tooltip]="getTooltipContent(y+1,x+1)" placement="bottom">
{{ setBerechnung(y+1, x+1).messwert}}
</td>
</tr>
</table>
This is my GetTooltipContent-Function (TS/Angular):
public getTooltipContent(yKoordinate: number, xKoordinate: number)
{
const sensor = this.fullZoneResponse.sensorInSurface
.filter(x => x.xKoordinate == xKoordinate && x.yKoordinate == yKoordinate);
let zoneAssignment: IzoneAssignment[] = [];
this.fullZonenResponse.zoneInSurface.forEach((value) => {
zoneAssignment.push(...value.assignmentOfZone);
});
const sensorIsInSurface = zoneAssignment.filter(x => x.idSensor == sensor[0].id);
if (sensorIsInSurface.length > 0) {
this.zoneAssignment = this.fullZonenResponse.zoneInSurface.filter(x => x.id == sensorAssignment[0].idZone);
return this.tooltipContent = this.zoneAssignment[0].description;
}
else
{
return this.tooltipContent = "";
}
}
Here is a snapshot showing its normal behavior:
https://i.sstatic.net/TWP9k.png
And another one demonstrating its erratic behavior:
https://i.sstatic.net/WlEfV.png
Your assistance in troubleshooting this issue would be greatly appreciated!