Why does adding tooltips to column heading cause angular columns to jump sideways?

问题

I have this template:

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

Before adding the tooltips, the columns stayed exactly where they were initially rendered on the page.

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

But now, when a user hovers over one of the headings, the column shifts right or left. And in some areas, the columns continue shifting--a high-speed flicker.

Is this a bug in Angular, or is there some additional metadata required in the s, or in css somewhere?

Removing tooltip-append-to-body has no effect.

回答1:

The problem here is that the tooltips get inserted into the header row causing the browser to reflow, i.e. recalculate the layout, taking into account the width of the tooltips causing the tables rows to jump out of place.

Quite close with the solution here, tooltip-append-to-body is not a valid angular directive. The angular directive of the ng-bootstrap library serving the same purpose is container="body".

More info on the api: https://ng-bootstrap.github.io/#/components/tooltip/api

来源：https://stackoverflow.com/questions/52748740/why-does-adding-tooltips-to-column-heading-cause-angular-columns-to-jump-sideway

标签

angular

tooltip