tooltip issue

[Narsimsetty Chalamaiah]

Hi Team,

i used tooltip in my project , am passing tooltip hide issue,

i used bellow code. please find code and screen shot .

in component.ts

tooltip(args: any) {   

    if (args.column.field === "Balance") {

      const tooltip: Tooltip = new Tooltip({

        content: 'Open Items:' + args.data['OpenItems'].toString()

      }, args.cell as HTMLTableCellElement);

    }

  

  }

 onClickBalance(args: any) {  

    args.url = '/customer/statement';  

  }

in html

 <ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]='pageSettings' [allowSorting]='true'

                  allowReordering='true' (actionComplete)="actionComplete($event)" [height]="300" [resizeSettings]="resizeSettings"

                   (queryCellInfo)='tooltip($event)' (dataBound)="dataBound($event)">

  <e-columns>

   <div *ngIf='column.field === "Balance"'>

                  <e-column [field]="column.field" [headerText]="column.headerName" [visible]='column.visibility'

                            [customAttributes]='customAttributes' [width]="150">

                    <ng-template #template let-data>

                      <a (click)='onClickBalance(data)' class="hyl">{{data.Balance}}</a>

                    </ng-template>

                  </e-column>

                </div>

 </e-columns>

        </ejs-grid>

1.if i mouse over on balance tooltip is showing.

2.when i click on balance tool tip is not hide.

Thanks & Regards

Chalamaiah N,

[Manivel Sellamuthu]

Hi Narsimsetty, 

Greetings from Syncfusion support. 

The suggested documentation demonstrates a way to create tooltip for each cell, which may affect the performance when the grid is having  more cells. We have already logged a task for updating the documentation and it will be included in any of our upcoming release. You can resolve the reported issue by following the below steps. 

Initially the Grid needs to be rendered inside the EJ2 Angular Tooltip component, for which its target property value is set as ‘.e-rowcell’(This class is added to the Grid’s content cell elements , so the tooltip will be displayed only on hovering of them). Since you want to show the tooltip on particular column only, we can use customAttribute to the column we want to show the tooltip.  

Please refer the below code example and sample for more information. In the below sample we have added “.e- showtooltip” class to the CustomerID column. We can change the content of the tooltip dynamically using beforeRender event of the tooltip. 

<div class="control-section diagram-complex-hierarchical-tree"> 

  <ejs-tooltip #tooltip id="tooltip" (beforeRender)="beforeRender($event)" target=".e-rowcell.e-showtooltip"> 

  <ejs-grid #grid [dataSource]="data" [editSettings]="editSettings" [toolbar]="toolbar" height="273px"> 

    <e-columns> 

      <e-column field="CustomerID" [customAttributes]="{class: 'e-showtooltip'}" headerText="Customer ID" width="120"></e-column> 

  . . . 

      </e-column> 

    </e-columns> 

  </ejs-grid> 

  </ejs-tooltip> 

export class AppComponent implements OnInit { 

 

  public data: object[]; 

  @ViewChild('grid', {static: true}) 

  public grid : GridComponent; 

  @ViewChild('tooltip', {static: true}) 

  public toolTip: TooltipComponent; 

 

  ngOnInit(): void { 

    this.data = data; 

  } 

  beforeRender (args) { 

    var data = this.grid.getRowInfo(args.target).rowData; 

    this.toolTip.content = data["CustomerID"]; 

  } 

} 

Sample: https://stackblitz.com/edit/angular-164347?file=app.component.html 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[Narsimsetty Chalamaiah]

Hi Team

As per business requirement should be use tooltip to multiple columns.

As i tested code , I can't able to handle in multiple columns tooltip.

how can able to use tooltip for Customer id and freight and order id.?

please find below screen , please send code asap.

Thanks & Regards

Chalamaiah N

[Manivel Sellamuthu]

Hi Narsimsetty, 

Thanks for your update. 

Since we are showing the tooltip on the columns based on the custom attributes, you can add the custom attribute for the column that you want to show the tooltip. We have modified our previous sample. 

Please refer the below code example and sample for more information. 

<div class="control-section diagram-complex-hierarchical-tree"> 

  <ejs-tooltip #tooltip id="tooltip" (beforeRender)="beforeRender($event)" target=".e-rowcell.e-showtooltip"> 

  <ejs-grid #grid [dataSource]="data" [editSettings]="editSettings" [toolbar]="toolbar" height="273px"> 

    <e-columns> 

      <e-column field="OrderID" [customAttributes]="{class: 'e-showtooltip'}" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="100"> 

      </e-column> 

      <e-column field="CustomerID" [customAttributes]="{class: 'e-showtooltip'}" headerText="Customer ID" width="120"></e-column> 

      <e-column field="Freight" [customAttributes]="{class: 'e-showtooltip'}" headerText="Freight" textAlign="Right" editType="numericedit" width="120" 

        format="C2"></e-column> 

      <e-column field="OrderDate" headerText="Order Date" type="date" format="yMd" [edit]="dpParams" width="150"> 

      </e-column> 

    </e-columns> 

  </ejs-grid> 

  </ejs-tooltip> 

export class AppComponent implements OnInit { 

 

  public data: object[]; 

  @ViewChild('grid', {static: true}) 

  public grid : GridComponent; 

  @ViewChild('tooltip', {static: true}) 

  public toolTip: TooltipComponent; 

 

  ngOnInit(): void { 

    this.data = data; 

  } 

  beforeRender (args) { 

    var rowInfo = this.grid.getRowInfo(args.target); 

    this.toolTip.content = rowInfo.rowData[rowInfo.column.field].toString(); 

  } 

} 

Sample: https://stackblitz.com/edit/angular-164347?file=app.component.html 

Please let us know if you need further assistance. 

Regards, 

Manivel