Need to display customized tool-tip (dx-tooltip) on hover on cell in dx-data-grid in Angular 6 application

Question

I need to display customized tooltips (dx-tooltip) on hover on each cell in a column of dx-data-grid. I work with Angular 6 and don't use jQuery. Is there a way to achieve this?

I am struggling with assigning different id attributes each cell on onCellHoverChanged/onCellPrepared event, which I need for the target attribute in dx-tooltip.

dx-tooltip: (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 event (component .ts)

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

Using this code I am able to display a tooltip for a particular cell only. I need multiple ids for displaying different tooltips in a column. Devextreme version is 18.2.6.

Answer 1

I solved this problem in the following manner:

html:

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

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