Performance Issue with the tooltip

[Iana Stapelberg]

When I have multiple tooltips on the page (then are in ngFor) - and right now there are 36 of them. 

It seem that every each of them adds event listener to the document. So every scroll, mouse click or key down causes huge delay, because the even propagates to the document, and then zone has to execute multiple tasks.

Is there any way around it? It's so slow, it's unusable. 

[LeoLavanya Dhanaraj]

Hi Iana,

Greetings from Syncfusion support.

Based on the details you have shared, we understand that you wish to render multiple Tooltips and are experiencing performance issues related to the usage of components. To address this performance issue, we recommend rendering a single Tooltip component as a wrapper for the other components (the components that need to display the tooltip), rather than initializing a separate Tooltip for each component. This approach ensures proper Tooltip behavior.

We have prepared a sample to demonstrate the usage of the Tooltip component. In this sample, we render a certain number of fieldsets and use a single Tooltip component as a wrapper, setting the appropriate target attribute. We have not encountered any performance issues with this method, which is best for improving performance as it allows you to render multiple HTML elements and display the Tooltip using the correct target attribute.

Check out the below attached sample and code snippets for further assistance.

Sample : https://stackblitz.com/edit/angular-vkqmj5-rwgbgmmd?file=src%2Fapp.component.html,src%2Fapp.component.ts

Documentation : Tooltip for multiple targets in Vue Tooltip component | Syncfusion

Regards,

Leo Lavanya Dhanaraj

[Abel]

I have the same performance issue. I am using the tree grid component in which each row has its own tooltip because the content is dependent on the row data.

When adding many items to the tree grid (~100), the performance when scrolling is too poor and the problems seems related because it fires the change detection.

When scrolling "fast", the tree, even with virtualization, disappears some seconds and the page is unresponsive. 

[LeoLavanya Dhanaraj]

Hi Abel,

Greetings from Syncfusion support.

With the shared details, we understand that you are facing performance issues with the Grid and Tooltip components. To validate the issue, we prepared the TreeGrid with the specified number of data’s and displayed the Tooltip for each row, showing the Tooltip with its corresponding row value(rendered a wrapper and dynamically changed the content inside the beforeSend event). However, the Tooltip is displayed correctly on our end without any performance issues. For your reference, we have included the validated sample.

Sample : Ot5lq5gz (forked) - StackBlitz

Check the attached sample on your end and if you are still facing performance issues, kindly share the component rendering code(Tooltip and TreeGrid, used properties, methods and customization) details along with a video demonstrating the issue. This information will help us further validate the problem and provide a solution based on your needs.

[Abel]

Hi 

Thank you for your answer but it is not the same implementation as mine.

Let me attach the sample modified with my configuration. 

My real scenario is even worse as i have more columns and when scrolling, the treegrid gets blank and unresponsive for some seconds.

Thanaks

Attachment: Archivo_620cc041.zip

[Shereen Shajahan]

Hi Abel,

New Forum has been branched for your query, please follow up the link below for future updates.

Performance issue in TreeGrid with tooltip - Branched from 196043 | Angular - EJ 2 Forums | Syncfusion®

Regards,

Shereen