Bootstrap подсказка переключает ширину при наведении - PullRequest
0 голосов
/ 25 февраля 2020

У меня есть определенная c проблема с моим angular веб-приложением. Я просматриваю матрицу в моем приложении с данными в нем. Когда я наведу курсор мыши на свои данные в этой матрице, она покажет некоторую базовую информацию об объекте. в любом случае: каждый раз, когда я наводю курсор на него курсором, он меняет ширину справа налево.

my HTML:

<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}}&nbsp;
            </td>
        </tr>
</table>

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 = "";    
        }
}

Вот скриншот его нормального поведения:

not hovering status

и еще одно плохое поведение:

hovering status

Я был бы очень очень благодарен, если бы вы могли мне помочь!

1 Ответ

0 голосов
/ 26 февраля 2020

Я исправил это самостоятельно!

Проблема заключалась в том, что моя подсказка ngx- bootstrap была добавлена ​​в мою DOM во время выполнения. Я только что добавил атрибут " container = 'body' " -, поэтому подсказка get добавлена ​​в нужный элемент.

my HTML сейчас:

<tr *ngFor="let y of yArray">
      <td *ngFor="let x of xArray" container="body" [style.background]="getBackground(y+1,x+1)" [tooltip]="getTooltipContent(y+1,x+1)" placement="bottom">
          {{ setBerechnung(y+1, x+1).messwert}}&nbsp;
      </td>
</tr>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...