Question

使用ngx-datatable库时，将鼠标悬停在表格单元格上时有时会显示工具提示，有时则不会。我有一张带有自定义单元格模板的表格，并希望显示这些工具提示。

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

以下是一些未显示的示例：

有人可以解释为什么有时会出现工具提示吗？

Answer 1

您可以轻松地将工具提示属性用于引导，将数据工具提示用于实现。基本属性是标题。

tooltip="your tooltip"

但是模板类存在一些冲突，因此如果您希望在列标题中使用工具提示，可能会失去排序功能。有这样的解决方法。

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

我还可以使用 ngbTooltip 实现工具提示。

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

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

之前，工具提示未正确显示

Answer 3

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

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

3 个答案: