Last Updated: 06 Jun 2022 07:19 by ADMIN
Michael D
Created on: 30 May 2022 13:18
Category: Tooltip
Type: Bug Report
Tooltip size calculations do not work as expected in some themes

I have noticed that, after switching themes, the tooltips in our application do no longer work correctly. I was able to reproduce the issue in the following two DOJOs:

The only difference between those two is the stylesheet to be loaded (line 6).

Steps to reproduce:

  1. load the DOJO
  2. hover over the red dot (notice how the text uses all space available and does not get wrapped unless necessary)
  3. hover over the green dot 
  4. hover over the red dot again

In step 4, the correct behavior would be displaying the tooltip in the same fashion as in step 2. However, in the faulty DOJO, it can be seen that the tooltip does not expand past the width of the text that is displayed when hovering over the green dot. This means that when displaying long tooltips after short ones, they are always wrapped unnecessarily.

A way to fix this behavior (and what's actually the difference between the two stylesheets) is to set the position on the ".k-animation-container" back to its default value "static". Usually, this value is overridden by the output of the size calculations, but during the calculations this value comes to play.

This third DOJO demonstrates the fix described above.

Please note that when using the default-ocean-blue stylesheet, the positioning of the callout seems to be broken as well.

1 comment
Posted on: 06 Jun 2022 07:19

Hello, Michael,

Thank you for reporting the bug.

About the part with the position - the ocean-blue theme is a SASS based which means it should be used alone, without the kendo.common.min.css file (which is used for the LESS based themes. Here is the modified example for reference.

As a small token of gratitude for reporting the width issue, I am updating your Telerik Points.

Let me know if you have any further questions.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.