How to get tooltips in ejs-grid with delay

Question

Hi,i have a grid with tooltips on every cell and the tooltipdata is retrieved async from backend.This works fine.But if i hover over to many grid cells to fast, the application becomes slow. Therefore i want to add a delay for the tooltip, so only if i hover the mouse over a cell for e.g. 0.5 seconds

the data is retrieved from backend and the tooltip is shown.This is my working example at the moment.https://stackblitz.com/edit/angular-ivy-qfj5bs?file=src%2Fapp%2Fapp.component.tsCould you please give me a hint how to solve this?Thx and regardsMatthias

Rajapandi Ravi · Answer

Hi Matthias,Greetings from Syncfusion supportAfter reviewing your query, we could see that you are facing
the problem with tooltip. While opening you shared stackblitz sample, we have
faced the 404 problems. So please share the proper stackblitz sample link to
proceed further validation.Regards,Rajapandi R

Matthias Wagner · Answer

Sorry for the inconvenience, the project was set to private on stackblitz.

Should work now with this link. https://stackblitz.com/edit/angular-ivy-qfj5bs?file=src%2Fapp%2Fapp.component.ts

Regards
Matthias

Rajapandi Ravi · Answer

Matthias,We have checked
your shared application, we could see that you are using mouseover event to
display the tooltip. We suggest you render the
Grid component inside the Tooltip component and show the tooltip based on the
target. In the beforeRender event of Tooltip component, we
dynamically changed the tooltip content based on the target element.Documentation:
https://ej2.syncfusion.com/angular/documentation/grid/cell#display-custom-tooltip-for-columnsSince
you are getting the data from the backend, in beforeRender event you have to set
args.cancel as true to cancel the default action and in this event you can make
your service call and in the success you can set the tooltip content. Please
refer the below code example for more information.

beforeRender(args): void {
      if
  (args.target.classList.contains('e-rowcell')) {
          // event triggered
  before render the tooltip on target element.
   
          args.cancel = true; //prevent the default
  action
          if(flag) { //set default value
  as true
            flag = false;
            //here perform your service cal to get the
  data and in your success function you can set the tooltip content 
                as you want with some time interval
               success()
  {
               tooltipInstance.content
  = 'value ';
               }
           }
          
      }
    }