Kendo UI Tooltip not reflecting the correct message

[SUNIL]

I am using a scenario where the tooltip shows for each textbox based on its title property, but the tooltip is not showing the correct message probably because the kendo ui library is changing it.

When you click the Submit button, then the title of each textbox is being set based on whether the textbox has a missing value. After clicking Submit button, if you focus into any textbox you will see that its title is set to empty string. I am showing the latest values of the title of each textbox on load event and also on focus, mouseenter and blur of each textbox.

The code sampe is at https://dojo.telerik.com/CZauQXvf

I have two questions. 

1. How can the tooltip show the message based on the lastest title of the textbox? This is not happening. If you input a value into any textbox and click Submit then the title of that textbox is being set to empty, but the tooltip for that textbox still shows the old message.
2. How can the tooltip be not shown when there is no content in it i.e. title value of the textbox is an empty string? Right now its showing an empty tooltip.

 

[Jay]

1. If you change the title property, you need to refresh the tooltip so that it picks up the new title.

2. You could try this approach from stackoverflow which creates a beforeShow pseudo-event. Alternatively, only create the tooltip when you set the title, and if you clear the title, destroy the tooltip.

 

[SUNIL]

Thankyou. Your suggestions look good. I will try them and give an update.

[SUNIL]

I made it work by using refresh. The sample is at https://dojo.telerik.com/LJFviLDx

But there are minor issues like the browser tooltip showing when the kendo tooltip is showing. Perhaps, the title attribute should not be populated to prevent this.

[Jay]

The browser tooltip showing seems to be a result of a combination of the visibility being toggled, the refresh and setting the title. Normally, having a kendo tooltip does not allow the browser tooltip to be shown.

Here is an implementation that creates and destroys the tooltip as necessary and seems to provide what you're looking for.

 

[SUNIL]

Great code. Thank you. Indeed, destroying the tooltip after every use is a good way to work with complex applications of kendo tooltip. The browser tooltip that I mentioned in my last comment appears due to a bug that I have described in detail in post below.

[SUNIL]

I think there is a bug which I stumbled upon while trying to implement my requirements. 

Look at the code sample at https://dojo.telerik.com/ASUrRhRt

Perform the following steps to reproduce the bug.

1. Press the Run button after going to https://dojo.telerik.com/ASUrRhRt
2. Focus into the Email textbox.
3. Press the space bar,  mouse out of the textbox and mouse into the same textbox, wait a few moments and you'll see the bug. OR mouse over to the LastName textbox and then mouse over back to the Email textbox to see the same bug.
4. Look at the bottom most area of the rendered page to see this discrepancy that shows the title values from prop and data of the target textbox, when in content method.

The bug is that a browser tooltip is also being displayed in addition to the kendo tooltip.

That should not happen. Only the kendo tooltip should display and browser tooltip should not. So what's happening here that's causing this behavior? Its the fact that in content method, target.data("title") is undefined while target.prop("title") has some non-empty string value, so as soon as browser finds that title is not empty it displays its own tooltip.

In content method, the value of target.data("title") must be some non-empty string while target.prop("title") should be undefined or empty. To resolve this issue, I included the following code in the content method ( at the start of this method).

textBox.data("title", textBox.prop("title"));
textBox.prop("title", "");

You can see a screen recording showing this issue at Screen Recording of this bug

Remember, you need to focus into the Email textbox after Run, then press Space bar once and then move the mouse within the Email textbox which will make the browser tooltip also appear.

The other way to reproduce the error is first go to Email textbox, press Space bar once and then move the mouse over to the Last Name textbox.

In a textbox, "mouse over" refers to the action of moving the mouse cursor and hovering it over the textbox without clicking it.

[Nikolay]

Hi SUNIL,

Could you please record a screencast of the problem so I can better understand it. From the provided steps, I do not see the browser tooltip being displayed.

Regards,

Nikolay

[SUNIL]

Hi Nikolay,  I have updated my bug post with what you asked for.