ngx-datatable：如何显示工具提示

Question

使用 ngx-datatable 库时，有时将鼠标悬停在 table 单元格上时会出现工具提示，有时不会。我有一个带有自定义单元格模板的 table，我想让这些工具提示出现。

以下是将鼠标悬停在 table 个单元格上时出现工具提示的示例：

以下是它们未出现的示例：

有人可以解释一下 how/why 工具提示有时会出现吗？

Answer 1

我发现这是因为在单元格上设置了 title 属性。我不确定为什么在某些情况下设置它而不是其他情况，但至少我可以将它添加到我自己的模板中。

Answer 2

您可以轻松地将工具提示属性用于 bootstrap 和 data-tooltip 实现。基本属性将是标题。

tooltip="your tooltip"

但是与模板 class 存在一些冲突，因此如果您想要在列 headers 中显示工具提示，则可能会失去排序功能。有这样的解决方法。

<ngx-datatable-column  [width]="500" prop="name" headerClass="text-left">
                    <ng-template ngx-datatable-header-template let-column="column" let-sort="sortFn">
                        <div class="d-inline-block datatable-header-cell-wrapper" tooltip="your tooltip" container="body" [adaptivePosition]="false" placement="top">
                            <span class="datatable-header-cell-label draggable" (click)="sort()">Column Header</span>
                        </div>
                    </ng-template>

Answer 3

我还能够使用 ngbTooltip 实现工具提示。

<ng-template let-column="column"
      ngx-datatable-header-template>
      <div container="body"
           [ngbTooltip]="'tooltip text">
           header 1
      </div>
</ng-template>

请注意，在我添加 container="body"

之前，工具提示无法正确显示

ngx-datatable：如何显示工具提示

ngx-datatable: How to make tooltips appear

ngx-datatable