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中的bug，还是s或css中的某些地方需要一些其他元数据？

删除工具提示附加到正文无效。

Answer 1

这里的问题是工具提示插入到标题行中导致浏览器重排，即重新计算布局，同时考虑到工具提示的宽度导致表行跳出适当位置。

与此处的解决方案非常接近，tooltip-append-to-body不是有效的角度指令。出于相同目的的ng-bootstrap库的angular指令是container="body"。

有关api的更多信息：https://ng-bootstrap.github.io/#/components/tooltip/api

为什么在列标题上添加工具提示会导致角形列向侧面跳跃？

1 个答案: