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:

• Correct behavior: https://dojo.telerik.com/eFOcahIS (stylesheet https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default.min.css)
• Invalid behavior: https://dojo.telerik.com/ahOkibow (stylesheet https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css)

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.

Hi Team,

I'd like to request the ability to be able to customize the Kendo UI ToolTip's callout.  For example, being able to set a border around it would be helpful.

Thank you!

Bug report

When a user mouseover's a specific element that produces the Kendo UI Tooltip initially with a position of bottom, the tooltip is below the browser window. Upon the mouseover a second time, the tooltip shows changes position to top.

Reproduction of the problem

1. Go to https://dojo.telerik.com/@PMcDonou/uzOyoROh
2. Mouseover the clip icon at the bottom of the Grid.

Current behavior

This will initially appear below the window. Upon mouseover a second time, will be above. Here is a screencast of the behavior.

Expected/desired behavior

The Kendo UI Tooltip should appear above to initially instead of being displayed outside the user's view.

Environment

• Kendo UI version: 2020.3.915
• Browser: all

Bug report

Reproduction of the problem

Dojo example

1. Hover "Some Text"

Current behavior

The Tooltip is not centered and appears to the left of the element it is shown for.

Expected/desired behavior

The tooltip is centered.

Environment

• Kendo UI version: 201x.r.ddd
• jQuery version: x.y
• Browser: [all]

Bug report

The Tooltip component is visualized at the upper left corner of the browser's window when opened in Safari.

• The issue is not reproducing with jQuery 1.xx and 2.x.x

Reproduction of the problem

1. Open this Dojo in Safari browser
2. Hover the bars in the BarChart

Current behavior

The Tooltip is visualized in the upper left corner of the browser's window

Expected/desired behavior

The Tooltip should be visualized on the top of each bar of the chart that is hovered.

• The expected behavior could be observed when the above Dojo is opened in Chrom

Environment

• Kendo UI version: 2019.3.917
• jQuery version: 3.x.x
• Browser: [Safari 11.1.2 ]

Bug report

Reproduction of the problem

Dojo example. Screencast.

1. Hover an event then move the cursor away (do this repeatedly).

Current behavior

The Tooltip does not hide.

Expected/desired behavior

The Tooltip hides.

Environment

• Kendo UI version: 2019.3.917
• jQuery version: x.y
• Browser: [all]

Please add an option to configure the base postion of the tooltip.

Default value is "target" for the target element. If "mouse" is set it is the current mouse position.

The tooltip widget should have a beforeShow event, which can be used to bind an observable to a locale template, used by the tooltip. While it's already possible to use widgets inside the tooltip, the tooltip is missplaced, since its shown before I'm able to bind the observable (called by show event) to its content.

Initializing tooltips on a container and filter is great, but we need a way to individualize some configuration options, especially positions.

Option 1: position = "auto"
if the target is close to the top, position is automatically set to bottom
if the target is close to the bottom, position is automatically set to top
if the target is close to the left, position is automatically set to right
if the target is close to the right, position is automatically set to left

Option2: position = function(tooltip, target) {}

This might be applicable to other properties.

Go here: http://demos.kendoui.com/web/tooltip/api.html

1. Click on Area 1 or Area 2 
2. Then:
a. click outside tooltip area
b. press "Esc"
c. scroll down the page

Current result: tooltip is closed

Expected result: tooltip should not be closed

It would be great to configure tooltip hide behaviour whether to close or not on 2. a, b, c actions.

I would like to update a single tooltip based on a user's input. I can currently do this but when the tooltip initially shows it has stale data in it. A property that would hold off on showing the tooltip until new data is added by a function would be nice and help prevent the user from ever seeing the stale data.