Kendo popover (popup) - adding delay to animation

[Boris]

Hello, I am using Angular 14 and Kendo popover to show popup (tooltip) when hovering on the column headers of my Kendo grid.

The problem I am experiencing is that I cannot find a way to add a 1s delay to the animation.

Here is part of the code:

<kendo-popover #template [animation]="popoverAnimation" position="bottom">
	<ng-template let-anchor kendoPopoverBodyTemplate>
		<es-table-reactive-help-popover
			[helpKey]="helpKeyMap.get(anchor.innerText)"
		></es-table-reactive-help-popover>
	</ng-template>
</kendo-popover>

<div
	class="wrapper"
	[popover]="template"
	(mouseover)="toggleTooltip($event)"
	(mouseleave)="hideTooltip()"
	kendoPopoverContainer
	showOn="hover"
>
	<kendo-grid>
		<kendo-grid-checkbox-column [width]="70" title="....">
		....
		</kendo-grid-checkbox-column>
		<kendo-grid-column [width]="200" field="name" title="....">
		</kendo-grid-column>
		<kendo-grid-column [width]="200" field="code" title="....">
		</kendo-grid-column
		><kendo-grid-column
			[width]="200"
			field="warehouseName"
			title="Customer warehouse"
		>
		</kendo-grid-column>
		<kendo-grid-column
			[sortable]="false"
			[width]="200"
			field="supplierEvents"
			title="...."
		>
			<ng-template kendoGridCellTemplate let-entry>
				<es-schedule-pills
					[eventSummary]="entry.eventSummary"
					[supplierName]="entry.name"
					[warehouseName]="entry.warehouseName"
					[supplierId]="entry.id"
				></es-schedule-pills>
			</ng-template>
		</kendo-grid-column>
	</kendo-grid>
</div>

 

1. The kendo-popover component has an input for animation, which uses the interface PopupAnimation, but it does not support animation delay.
2. I have tried adding a raw CSS animation through tag/class selectors but the popup shows and then the animation runs which seems buggy.
3. I cannot attach an animation through the component template since the popup element is generated under the hood and I don't have direct access to it in the template.

Can you provide me some other solution?

 

[Boris]

Okay, I found a solution that is adding a class with animation to the popup element dynamically, with Renderer2 from Angular, after using the show() method of PopoverContainerDirective. 

Still I'd like to know if you have better solutions.

[Yanmario]

Hi Boris,

Indeed, the Popover component doesn't provide a delay option for closing or opening the component. Such a enchantment to the component is valid and it can be logged in our feedback portal. Would you like me to open such a feature request on your behalf?

I am happy that you've found a workaround on achieving the delay. In theory the developer can also programmatically control when to show or hide the Popover and this will allow to programmatically delay the show or hide methods of the component.

https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control/

I hope this helps and I am looking forward to your reply about the feature request.

Regards,
Yanmario
Progress Telerik

[Boris]

Hello,

It would be great if you open such feature request on my behalf for animation delay.

Thank you!

[Yanmario]

Hi Boris,

I've opened the desired feature request in our feedback portal:

https://feedback.telerik.com/kendo-angular-ui/1583927-popup-add-delay-property-for-opening-or-closing-the-popup-component

I vote was also added on your behalf to support the request. Additionally feel free to add any comments for the feature request or if something is missing, I can edit it. I didn't mention the animation as the delay of rendering the popup seems to be the desired request (correct me if I am wrong).

Regards,
Yanmario
Progress Telerik