Unplanned
Last Updated: 13 Nov 2023 13:46 by ADMIN
Mauro
Created on: 05 Oct 2023 08:41
Category: Kendo UI for Angular
Type: Bug Report
1
Upload tooltip position incorrect

https://stackblitz.com/edit/angular-mqywpa?file=src%2Fapp%2Fupload.component.ts

When using kendoTooltip directive on the upload component - tooltips are positioned in invalid position somewhere on the app.

cancel, delete, retry tooltips.

9 comments
ADMIN
Yanmario
Posted on: 13 Nov 2023 13:46

Hi Mauro,

Indeed you are correct that the behavior is wrong and that seems to come from the aria title as the button itself doesn't hold a title. I will update the status and also log the issue in our public GitHub repository.

A workaround would be to use the Tooltip template which will also render the correct title:

https://stackblitz.com/edit/angular-qkbm5q-vzltnf?file=src%2Fapp%2Fapp.component.ts

The filter selector also can be updated depending on where the tooltip needs to be rendered. 

I will also update your Telerik Points.

Thank you for the report.

Regards,
Yanmario
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Mauro
Posted on: 06 Nov 2023 17:41

https://stackblitz.com/edit/angular-qkbm5q-3bsr6b?file=src%2Fapp%2Fapp.component.ts

These buttons are part of the kendo component. The tooltip content is added in Kendo code to [title]. It is also translated by i18n.

Mauro
Posted on: 06 Nov 2023 17:39

The question was about the tooltip position of the internal component tooltips.

The tooltip on the screenshot is not Kendo tooltip - its just the default browser tooltip.
If you apply kendoTooltip directive to it (that should apply to all title attributes) - the positions are incorrect.

ADMIN
Yanmario
Posted on: 06 Nov 2023 11:18

Hi Mauro,

The thread is getting a bit confusing as the initial question was related to the Tooltip position and in the latest screenshot the tooltip is rendered in the correct position. I will suggest providing us with a runnable example that demonstrates the issue with the wrong position rendering of the tooltip which will allow me to determine if there is an issue between both of our components.

As for the text in the template, the developer can add if statements and render the desired content depending on the hovered element.

Regards,
Yanmario
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Mauro
Posted on: 30 Oct 2023 11:55

example

Mauro
Posted on: 30 Oct 2023 11:54

Unfortunately filter no longer withs with title attribute.

The provided solution adds a template and renders everything with the same text. It just adds custom tooltip.

 

But these titles are added internally and translated (like retry, delete).

 

ADMIN
Yanmario
Posted on: 20 Oct 2023 07:27

Hi Mauro,

Thank you for the additional details.

I've updated the example to target all `k.button` classes inside the Upload component and the tooltips are rendering properly on my side in the following example:

https://stackblitz.com/edit/angular-qkbm5q-ba4nqj?file=src%2Fapp%2Fapp.component.ts

Both default and Kendo Tooltips are rendering properly. What I can suggest is updating to our latest component and Kendo Theme versions. Sharing an example is also an option for me to troubleshoot and find the root cause of the issue.

Regards,
Yanmario
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Mauro
Posted on: 13 Oct 2023 10:08

Its not for the button but the internal list buttons - remove, retry etc.
They have a title attribute with default browser tooltip.

 

ADMIN
Yanmario
Posted on: 12 Oct 2023 06:47

Hi Mauro,

It seems that the provided example doesn't contain the Tooltip component configuration and I wasn't able to reproduce such an issue on my side in the following example:

https://stackblitz.com/edit/angular-qkbm5q?file=src%2Fapp%2Fapp.component.ts

The example demonstrates how to target the Upload component button and use the template to add the content as the button itself doesn't contain the title attribute.

In such cases, our team would need a runnable example with your configuration to check if there is an issue with our component or if you would need to anchor the tooltip.

Please inform me if anchoring addresses the issue, as I'd like to update the bug report accordingly.

Regards,
Yanmario
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources