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.

[Nikolay]

Hi SUNIL,

The Google Drive file requires approval so I can see it. Is it possible to make it public?

Regards,

Nikolay

[SUNIL]

Sorry, I didn't realise that, but I have made it accessible to you and anyone else who would like to view this video. Once again, I am mentioning the updated link here. Screen recording of this issue

[Neli]

Hi Sunil,

Please try to remove the part of the code where the title is explicitly set:

 if ($("#txtEmail").val().trim() === "") {
         // $("#txtEmail").prop("title", "Email address is required");
          $("#txtEmail").prop("title1", "Email address is required");
          isValid = false;
        } else {

Here you will find the modified Dojo example where the default browser tooltip is not displayed - https://dojo.telerik.com/fyTYVKKL.

Regards,

Neli

[SUNIL]

Hi Neli,

Yes, that solves the problem.

The main thing is that in the mouseover event for a target, the title attribute must be empty for this target; otherwise, a browser tooltip will show. The browser displays its own tooltip just after the mouseover event.

Thankyou

[Nikolay]

Hi SUNIL,

The browser tooltip is displayed as title attribute is added to the input elements. The title attribute is a built-in HTML feature designed specifically to provide advisory information about an element. When a user hovers over the element, the browser automatically displays this text in a small native tooltip box.

The Kendo UI Tooltip does not substitude the browser tooltip out of the box.

If you wish to disable the browser tooltip remove the title attribute or replace it with empty string.

Basic Setup: Suppress Browser Tooltip & Show Kendo One

1. Initialize the Kendo Tooltip

2. Remove the title attribute to hide the browser tooltip

3. Use the title content for the Kendo tooltip

$("#yourGridElement [title]").kendoTooltip({
    content: function (e) {
        // Get the content from the title attribute
        var title = e.target.attr("title");
        // Remove the browser title to prevent double tooltips
        e.target.removeAttr("title");
        return title;
    },
    width: 200,
    height: 50,
    position: "top",
    showAfter: 500, // Show after 500ms delay
    animation: {
        open: { effects: "fade:in", duration: 300 },
        close: { effects: "fade:out", duration: 300 }
    }
});

Regards,

Nikolay

[SUNIL]

Hi Nikolay,

Yes, your logic prevents the browser tooltip from showing. However, an empty Kendo UI tooltip is still showing after valid input.

Thanks

[SUNIL]

Hi Nikolay,

I used the code below, which uses your logic to prevent browser tooltips and additional logic to hide the Kendo UI tooltip if the content is empty.

    function getContent(e) {
      var textBox = e.target;
      if (!textBox.prop("title")) {
        //hide the kendo ui tooltip if the title contains nothing
        e.sender.popup.element.css("visibility", "hidden");
        return "";
      }
      textBox.data("title", textBox.prop("title"));
      textBox.prop("title", "");//this stops the browser tooltip from showing
      e.target.removeAttr("title");
      e.sender.popup.element.css("visibility", "");
      return textBox.data("title");
    }

[Neli]

Hi Sunil,

As far as I understand the issue is now resolved. Could you please confirm.

Regards,

Neli