Нужно отобразить настраиваемую подсказку (dx-tooltip) при наведении на ячейку в dx-data-grid в приложении Angular 6

Question

Мне нужно отображать настраиваемые всплывающие подсказки (dx-tooltip) при наведении на каждую ячейку в столбце dx-data-grid. Я работаю с Angular 6 и не использую jQuery. Есть ли способ добиться этого?

Я борюсь с назначением различных атрибутов id каждой ячейке в событии onCellHoverChanged / onCellPrepared, которое мне нужно для целевого атрибута в подсказке dx.

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 (component .ts)

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

Используя этот код, я могу отобразить всплывающую подсказку только для конкретной ячейки. Мне нужно несколько идентификаторов для отображения различных подсказок в столбце. Версия Devextreme - 18.2.6.

Answer 1

Я решил эту проблему следующим образом:

html:

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

component.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;
  }
}