Stop tooltip from hiding

[Patrick]

I'm using the tooltip for validation purposes. I create tooltips when a form fails validation by hooking into jQuery validation. 

Because it's for validation, I don't want the tooltips to disappear when the user clicks away from the input.

e.g. I have an input text box which has invalid data, and so I show the tooltip next to the input. When the user clicks away from the input, the tooltip is hidden. I want it to permanently stay shown.

I've tried overriding the hide() method with no success.

Code below:

$.validator.setDefaults({

showErrors: function (errorMap, errorList) {

$.each(this.validElements(), function (index, element) {

var tooltip = $(element).data("kendoTooltip");
if (tooltip) {
tooltip.destroy();
}
});

$.each(this.invalidElements(), function (index, element) {

var tooltip = $(element).data("kendoTooltip");
if (tooltip) {
tooltip.destroy();
}
});

$.each(errorList, function (index, error) {

var element = $(error.element);

element.addClass("input-validation-error");

var tooltip = element.kendoTooltip({
content: error.message,
hide: function() {} //! THIS DOESN'T OVERRIDE!
}).data("kendoTooltip");

tooltip.show(element);
});
}
});

[Kiril Nikolov]

Hi Patrick,

Did you try with the autHide configuration property as explained here:

http://docs.telerik.com/kendo-ui/api/web/tooltip#configuration-autoHide

If you set it to false, then the tooltip will have its own close icon that the user can click, and if you do not need it you can use the hide() method to hide it programmatically:

http://docs.telerik.com/kendo-ui/api/web/tooltip#methods-hide

Regards,
Kiril Nikolov
Telerik

 

 

[Patrick]

Hello, thanks for the reply.

Yes I have tried that option, but the tooltip still hides if the user clicks away from the tooltip even with autoHide=false. I need it so the user absolutely cannot close the tooltip.

[Kiril Nikolov]

Hi Patrick,

The only workaround that I can think of at the moment is use the hide event in order to show the tooltip again. There is a blink between hiding and showing the tooltip, however this is something that cannot be worked around. Please note that this functionality is not supported as built-in feature and if you want to see it implemented please see our UserVoice section.

Here is the example that I created:

http://jsbin.com/zomasaqe/1/edit

Regards,
Kiril Nikolov
Telerik