Почему добавление всплывающих подсказок к заголовку столбца приводит к тому, что угловые столбцы подпрыгивают вбок?

Question

У меня есть этот шаблон:

  <div class="container">
  <h2 i18n="@@prioritizedWordsToLearn">Prioritized Words To Learn</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <th i18n="@@wordColumn">Word</th>
        <th i18n="@@definitionColumn">Definition</th>
        <th i18n="@@timesAddedColumn" placement="top" i18n-ngbTooltip="@@timesAddedTooltip" ngbTooltip="Number of times you have added this word to learn"
          tooltipClass="opacity-1" tooltip-append-to-body="true">Times Added</th>
        <th i18n="@@previouslyMarkedLearnedColumn" placement="top" i18n-ngbTooltip="@@previouslyMarkedLearnedTooltip"
          ngbTooltip="True if you ever said you had learned this word" tooltipClass="opacity-1" tooltip-append-to-body="true">Previously
          Marked
          Learned</th>
        <th i18n="@@rankColumn" placement="top" i18n-ngbTooltip="@@rankTooltip" ngbTooltip="Urgency of learning this word compared to your other words"
          tooltipClass="opacity-1" tooltip-append-to-body="true">Rank</th>
        <th i18n="@@learnedItColumn">I've Learned It</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let word of model">
        <td>{{word.word}}</td>
        <td>{{word.definition}}</td>
        <td>{{word.timesAdded}}</td>
        <td>{{word.wasMarkedLearned | translator}}</td>
        <td>{{word.rank()}}</td>
        <td><input type="checkbox" [(ngModel)]="word.learned" (click)="learn(word)"></td>
      </tr>
    </tbody>
  </table>
</div>

До добавления всплывающих подсказок столбцы оставались именно там, где они были первоначально отображены на странице.

Prioritized Words To Learn
Word    Definition  Times Added Previously Marked Learned   Rank    I've Learned It

Но теперь, когда пользовательколеблется над одним из заголовков, столбец смещается вправо или влево.А в некоторых областях столбцы продолжают смещаться - высокоскоростное мерцание.

Это ошибка в Angular, или требуются дополнительные метаданные в s или где-нибудь в css?

Удаление всплывающей подсказки к телу не имеет никакого эффекта.

Answer 1

Проблема здесь в том, что всплывающие подсказки вставляются в строку заголовка, в результате чего браузер выполняет перекомпоновку, т. Е. Пересчитывает макет с учетом ширины подсказок, в результате чего строки таблиц смещаются.

Совершенно близко к решению здесь, tooltip-append-to-body не является действительной угловой директивой.Угловая директива библиотеки ng-bootstrap, служащей той же цели: container="body".

Дополнительная информация по API: https://ng -bootstrap.github.io / # / components / tooltip / api