Performance Issue Forced Reflow and setTimeout Delay When Hovering Tooltip

[saravanan]

We’re experiencing a performance slowdown in our Angular application whenever a tooltip is hovered. Upon inspection in Chrome DevTools, we observed multiple warnings such as

These violations appear only during tooltip hover events, causing noticeable UI lag.

Environment:

• Framework: Angular 19.2.14

• Browser: Chrome (140.0.7339.208)

• Tooltip Version :  (@progress/kendo-angular-tooltip": "18.5.2")
  
  can you help with that? Thanks in advance.

[Martin Bechev]

Hello Saravanan,

The DevTools warnings you mentioned—[Violation] 'setTimeout' handler took 455ms and [Violation] Forced reflow while executing JavaScript took 438ms—indicate that the browser is spending significant time recalculating styles and layouts or handling timers during tooltip hover events. This can lead to UI lag, especially if heavy DOM manipulations or expensive calculations are triggered when the tooltip appears.

To help you further, could you share the Tooltip configuration and clarify if you are using custom tooltip templates or the default Kendo UI Tooltip configuration? Also, do you notice these warnings only on specific tooltips or across your entire app?

Recommendations for Improving Tooltip Performance

• If you are using custom templates with complex logic or many DOM elements, try simplifying the content.
• Avoid running heavy computations or change detection triggers inside the tooltip template

Please provide more details about the specific tooltip implementation (custom template or default) so that we can try to reproduce the issue on our side and give more targeted advice and suggest the most effective optimization for your scenario.

Regards,
Martin Bechev
Progress Telerik

[saravanan]

Hello Martin,

Thank you for your detailed response and the clarification.

• Each grid row contains multiple action buttons (e.g., view, edit, order, details).

• Each button has a Kendo Tooltip (kendoTooltip directive).

• On click, those buttons open a Kendo Dialog or custom modal.

• When the click occurs, the tooltip’s internal show/hide handlers still execute first (due to hover trigger overlap).

• The combination of tooltip lifecycle + modal initialization causes layout thrashing — manifesting as DevTools warnings like.
  
  
  

Note: This issue is reproducible globally across the application. The moment we remove the tooltip directive, the problem disappears completely — the dialogs open instantly without any delay.

Could you please advise if there’s a recommended approach to suppress tooltip lifecycle events during click operations, or any best practice to prevent this performance conflict between kendoTooltip and dialog rendering?

Regards,
Saravanan

[Martin Bechev]

Hi Saravanan,

Thank you for the provided additional details.

I am not sure what the tooltip configuration looks like, but applying the kendoTooltip directive to each row or cell can lead to performance issues, especially as the number of rows grows. This happens because each tooltip instance adds event listeners and logic, increasing the load on the browser and Angular's change detection.

Consider using a single tooltip instance with the filter property set.

Instead of attaching a tooltip to every row or cell, define a single kendoTooltip directive at a higher container level (such as the grid wrapper). Use the filter property to target only specific elements (e.g., buttons), reducing the number of listeners and instances.

Example:

<div kendoTooltip 
     [tooltipTemplate]="template" 
     showOn="click" 
     filter="mybutton">
  <kendo-grid ...>
    <kendo-grid-column ...>
      <ng-template kendoGridCellTemplate let-dataItem>
        <button kendoButton class="mybutton">  </i>
      </ng-template>
    </kendo-grid-column>
    <!-- other columns -->
  </kendo-grid>
</div>
<ng-template #template let-anchor>
  <!-- Tooltip content here -->
</ng-template>