angular - 需要在 Angular 6 应用程序的 dx-data-grid 中的单元格上悬停时显示自定义工具提示（dx-tooltip）

Question

我需要在 dx-data-grid 列中的每个单元格上悬停时显示自定义工具提示（dx-tooltip）。我使用 Angular 6，不使用 jQuery。有没有办法做到这一点？

我正在努力为 onCellHoverChanged/onCellPrepared 事件上的每个单元格分配不同的 id 属性，这是 dx-tooltip 中的目标属性所需要的。

dx 工具提示：（html）

<dx-tooltip target="#abc" showEvent="dxhoverstart" hideEvent="dxhoverend">
      <div *dxTemplate="let d = d; of: 'content'">
        <div class="tooltip-wrapper">
          <p>my content!</p>
        </div>
      </div>
    </dx-tooltip>

onCellHoverChanged 事件（组件 .ts）

  onCellHoverChanged(e: any) {
    if (e.rowType === "data" && e.column.dataField === "Type") {
      e.cellElement.id = "abc";
    }
  }

使用此代码，我只能显示特定单元格的工具提示。我需要多个 id 来在一列中显示不同的工具提示。Devextreme 版本是 18.2.6。

Answer 1

我通过以下方式解决了这个问题：

html:

<dx-tooltip *ngIf="ToolTipText?.length > 0" [target]="TooltipTarget">
    <div *dxTemplate="let data of 'content'">
      {{ ToolTipText }}
    </div>
</dx-tooltip>

组件.ts：

TooltipTarget : any;
ToolTipText :string = '';

onCellHoverChanged(event: any) {
if (event.rowType === "data" && event.column.dataField === "Type") {
  this.TooltipTarget = event.cellElement;
  if (event.eventType === 'mouseover') {
    this.ToolTipText = event.data.Tooltip;
  }
}