Tooltip in Dialog?

[lucas]

Hey there,

I'm currently developing a web app and making use of KendoUI, with a specific focus on the KendoTooltip component. However, I'm facing an issue when trying to use it with a native HTML5 dialog. The tooltip doesn't seem to display above the dialog.

Update: I just realized, that all components using KendoPopup are affected. So when I open a dropdown it's hidden in the background as well.

It's worth noting that the native HTML5 title attribute works just fine in this scenario.

I've even forked one of your examples to demonstrate the problem: Tawij7 (forked) - StackBlitz

If anyone has insights or suggestions on how to make the KendoTooltip work seamlessly with native HTML5 dialogs, I'd greatly appreciate your help!

Thanks in advance!

 

 

[Simeon]

Hi Lucas,

Thank you for the provided details.

The native HTML <dialog> element is added to the 'Top Layer' of the DOM. Top layer elements will appear on top of any element, including those with the highest z-index, which is why the tooltip is rendered behind the dialog.

For more information, please refer to the following article:

https://developer.chrome.com/blog/top-layer-devtools/

To avoid any undesired rendering, use the Kendo UI for Angular Dialog component:

https://stackblitz.com/edit/angular-y8v2px

I hope this helps.

Regards,
Simeon
Progress Telerik