flickering on sparkline tooltip

[Bob]

I have sparkline charts embedded in my grid with tooltips.
I can not get the tooltip to display predictably without flickering.
The problem is outlined in the mp4 file in the zip attached.
Can you suggest anything for me too look for or any css to bring the tooltip to the fore and stop it flickering?

 

[Hetali]

Hello Bob,

After a review of your recent Forum posts, it appears that you're using the Kendo UI for Angular components for commercial purposes and are using the Forums page for in lieu of a technical support license. 

This is a violation of the End User License Agreement against the good faith access to the Kendo UI for Angular packages via NPM.

We do want you to be successful with the product, and I have asked the Sales team reach out to you to discuss a license agreement that works for everyone.

Regards,
Hetali
Progress Telerik

[Bob]

Hi Hetali,

Sorry, my mistake, I am signing into the forum with the wrong account.
My customer account in [e-mail], customerId SW5704445.
OrderId for DevCraft renewal on Apr 17, 2020: ERS2723850 which does not expire until next year.

Do you want me to copy and paste and post again under the correct account?

Cheers,

Bob

[Hetali]

Hello Bob,

Thank you for the account details. I apologize for the misunderstanding.

Upon adding the Kendo UI Sparkline Chart in the Kendo UI Grid, the tooltip of the Chart does not flicker on my end as seen in this StackBlitz example.

To further investigate and help you resolve this issue, could you please update the example such that it replicates the behavior observed by you or send the Angular project?

Looking forward to your response.

Regards,
Hetali
Progress Telerik

[Bob]

Hi Hetali,

No problem on the misunderstanding.
I am using the Metronic framework for my angular front end.
Changing the StackBlitz example might be like blowing my teeth out when all I want to do is whistle a tune...
I am willing to accept that it's the framework and mix of css which is causing the problem.
I am not too good with css.  If there are any pointers you can give me I will pass them on to guys who know more than I.  Could it be something to do with z-index?  What could cause the flickering?  Is there any Telerik/Kendo/Progress .css files we should be looking at and where?  Are styles names clashing etc etc etc
The mp4 I sent you is an example of your grid displaying the state of care for very old people in a care home.  The flickering is not life-threatening but my users are working in the frontline of the current pandemic.  I would like to ask you to help me to make their UI experience easier by helping me to remove the flickering.  I have a couple of guys who can help.
Cheers,
Bob

[Hetali]

Hello Bob,

I understand and I will do my best to help you.

I found this reported bug which may be related your issue. Please try adding the following CSS snippet:

.k-chart-tooltip-wrapper.k-animation-container-shown{
  transition: none;
  -webkit-transition: none;
}

If the flickering continues, could you try to remove the Metronic framework and see if the tooltip still flickers?

To investigate further and help you with a workaround, I will need the zip file of the Angular application. Before sending, please remove the 'node_modules' folder to save space and let me know if you would like me to change the ticket to a private support ticket.

Also, I recommend creating a support ticket (instead of Forums post) in the future for a faster turnaround of 24 hours from the support team. The support tickets are also private than public.

I hope this information helps.

Regards,
Hetali
Progress Telerik

[Bob]

Hi Hetali,

No joy on that, I'm afraid.  My project uses the Zero framework, Metronic and my C# API has several data sources all in the cloud.  It's pointless me sharing the project because you would never be able to get it working without access to the source and even then detailed instructions are needed.

Unless there's anything else you can suggest blindly I suppose we may as well close this and accept the poor interface.

[Svet]

Hi Bob,

Indeed, in such cases, when a specific undesired behavior is reported we need to be able to reproduce the behavior on our side. That helps us to inspect the used code and most of the times we are able to suggest some further feedback. I understand that this may be disappointing, but from the provided information, I am not sure what else could cause the issue other than custom CSS styles interfering with each other or the usage of outdate Kendo UI for Angular packages. Please make sure that you are using the latest Charts and Kendo theme versions. If you could take out just the Grid with the sparkline charts part isolated in a StackBlitz example where the reported behavior is reproduced we will be glad to provide some further assistance. You can further use the previously provided example as a base.

Regards,
Svetlin
Progress Telerik