Grid custom tooltip doesn't hide sometimes

[Nastaran Heydari]

Hi,
I'm using tooltip for one of the columns in my grid and sometimes when I hover on the upper cell of the grid and mouse goes over the tooltip the tooltip doesn't hide and it sticks in its place until I push the Esc button on my keyboard. I thought its just in my code but I tried on the example in the documentation and got the same result. I took a screenshot and attached it in this thread for you to see. 
how can I fix that problem :

here's my code for the tooltip : 

`

    tooltip(args: QueryCellInfoEventArgs){

        if(args.column.field === 'part.technicalNo'){

            let cellData: any = args.data;

            const tooltip: Tooltip = new Tooltip({

                content: `${cellData.part.id} <br> ${cellData.part.name}`,

                enableRtl:true,

                cssClass:'grid-tooltip',

           },args.cell as HTMLTableCellElement)
        }
    }

`

Attachment: gridtooltip_44eb45d8.rar

[Thavasianand Sankaranarayanan]

Hi Nastaran, 

Greetings from Syncfusion support. 

By default, while using queryCellInfo then we created tooltip for each cell so we suspect that, when you hover the element then it does not destroy properly in Grid. We suggest you to use the below way to resolve the reported problem. Here we have created a rendered a tooltip and change the content dynamically when hover the grid element. 

 

Refer the below code example. 

 

[app.component.html] 

 

<ejs-tooltip #tooltip position='BottomCenter' 

             target=".e-rowcell"> 

 

    <ejs-grid [dataSource]='data' allowPaging=true (mouseover)='mouseover($event)'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

</ejs-tooltip> 

 

----------------------------------------------------------------------- 

[app.component.ts] 

 

export class AppComponent { 

    public data: Object[] = []; 

    @ViewChild("tooltip") 

    public tooltip: TooltipComponent; 

 

 

    ngOnInit(): void { 

        this.data = orderDetails; 

    } 

 

    mouseover(args) { 

        if (args.target.classList.contains('e-rowcell') && args.target.innerText) { 

            this.tooltip.content = args.target.innerText; 

        } 

    } 

} 

 

We have prepared a simple sample in the following link. 

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

Regards, 

Thavasianand S. 

[Nastaran Heydari]

Thanks.

I need to just do this for one column. so I should check if the cell is for that column and the content of tooltip should some fileds of that row. how can I get that?

[Thavasianand Sankaranarayanan]

Hi Nastaran, 

We can achieve your requirement using the below code example. 

[app.component.html] 

<ejs-tooltip #tooltip position='BottomCenter' 

             target=".e-rowcell.customcss"> 

 

    <ejs-grid [dataSource]='data' allowPaging=true (mouseover)='mouseover($event)'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' [customAttributes]='customAttri' headerText='Customer Name' width='150'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

</ejs-tooltip> 

----------------------------------------------------------------------------------------------------------------------- 

[app.component.ts] 

export class AppComponent { 

    public data: Object[] = []; 

    @ViewChild("tooltip") 

    public tooltip: TooltipComponent; 

    public customAttri: object; 

 

    ngOnInit(): void { 

        this.data = orderDetails; 

        this.customAttri = { 'class': 'customcss' }; 

    } 

 

    mouseover(args) { 

        if (args.target.classList.contains('customcss') && args.target.innerText) { 

            this.tooltip.content = args.target.innerText; 

        } 

    } 

} 

We have prepared a simple sample in the following link. 

Link: https://stackblitz.com/edit/angular-hndzxf-x7u2mm?file=app.component.ts 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#customattributes 

Regards, 

Thavasianand S. 

[Nastaran Heydari]

thanks that really helped.
what if I want to show the text of other column in the tooltip of that column? in 'args' I can just access the text of the hovered column cell. but I want to show the text of other column.

[Thavasianand Sankaranarayanan]

Hi Nastaran, 

We can show other column value as a tooltip by providing the tooltip content of other columns in mouseover event. 

Refer the below code example. 

[app.component.ts] 

mouseover(args) { 

    if (args.target.classList.contains('customcss') && args.target.innerText) { 

        this.tooltip.content = args.target.parentElement.children[2].innerHTML; 

    } 

} 

We have modified the sample in the following link. 

Link: https://stackblitz.com/edit/angular-hndzxf-s7uknz?file=app.component.ts 

Regards, 

Thavasianand S. 

[Remy]

Hi Thavasianand,

I am having the exact same issue than Nastaran. However, I need to access the data of the cell (the text of the tooltip is stored in the remote DB). At the moment I am using the queryCellInfo event and a simplified version of my code looks like this :

queryCellInfo(args: QueryCellInfoEventArgs) {

  // CELL TOOLTIP
  if (args.data['arrayOfWeeks']['week' + args.column.index]['commentVacancesRotations']) {
    const tooltip: Tooltip = new Tooltip({
      content: args.data['arrayOfWeeks']['week' + args.column.index]['commentVacancesRotations'].toString(),
      openDelay: 300,
      position: 'RightCenter',
      showTipPointer: true,
      cssClass: 'GridTooltip'
    }, args.cell);
  }

}

With the solution you provided (using the mouseover event), I cannot access to data of the "mouseovered" cell (like queryCellInfo's args.data) to use it in my condition as well as to use its content as the tooltip text. Would you happen to know if there is a workaround?

Thank you very much for your support.

Regards,

Remy

[Shalini Maragathavel]

Hi Remi, 

Thanks for contacting Syncfusion support. 

Based on your query you need to get row data in the mouseover event. To achieve your requirement we suggest you to use getRowInfo method of EJ2 Grid. In mouseover event we can get target element and using that element we can get the row data using getRowInfo method. 

For more information please refer the below code example  

mouseover(args) { 

    if (args.target.classList.contains('e-rowcell') && args.target.innerText) { 

       

      this.tooltip.content = args.target.innerText; 

          let rowInfo = this.grid.getRowInfo(args.target); // get row information 

     

   } 

 

Please find the  below sample for more information. 

Sample: https://stackblitz.com/edit/angular-hndzxf-o9gyzm?file=app.component.ts 

For more information please refer the below document,  

https://ej2.syncfusion.com/angular/documentation/api/grid/#getrowinfo 

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

[Remy]

Hi Shalini,

Gotcha, that worked great. Thank you so much for your quick support.

Regards,

Remy

[Shalini Maragathavel]

Hi Remy, 

  

Thanks for your update. 

  

We are happy to hear that your problem has been resolved. 

  

Please get back to us if you need further assistance from us. 

  

Regards,
Shalini M.