Tooltip doesn't hide when element lost focus when set to showOn focus

[Fernando]

When the tooltip is set to show on "focus" and the autoHide is set to "true", the tooltip shows on focus but doesn't hide when element lost focus. I believe it should work like the mouse that shows when mouse enter and hide when mouse leaves. Am I right?

This are the options I'm using in this case:

content: "SomeText",
position: "top",
showOn: "focus"

[Fernando]

BTW, this fixed:

$(element).on("blur", function()
{
    $(this).data("kendoTooltip").hide();
});

[Dimiter Madjarov]

Hi Fernando,


I was unable to reproduce the behavior in the following example. Please let me know if this is the expected one in the current case?

Regards,
Dimiter Madjarov
Telerik

 

 

[Fernando]

Hi Dimiter,

To reproduce it, try these steps:

- Click anywhere in the snippet(Results) blank area;
- Press tab(the field should be focused and the tooltip apears);
- Press tab again(the fields lost focus but the tooltip keeps showing).

After that, if you enter the field with mouse and leave, the tooltip hide, even without being focused.

[Dimiter Madjarov]

Hi Fernando,


Thanks for providing the additional details. Indeed the behavior is by design - showOn configures only the event on which the tooltip will be shown, but when the autoHide option is enabled, the tooltip will be hidden only when the mouse leaves the target element. Since this is not the expected behavior, using the workaround from your second post is recommended.

Regards,
Dimiter Madjarov
Telerik

 

 

[Fernando]

Ok.

Just by curiosity: That was considered an issue or we should get used to that workaround?

[Dimiter Madjarov]

Hello Fernando,


This is not considered an issue. The behavior is by design. If the Tooltip should be hidden otherwise, using the blur event is the recommended approach.

Regards,
Dimiter Madjarov
Telerik

 

 

[Anthony]

I'm afraid I didn't understand your explanation, and I see Fernando was also asking if this is an issue so I guess he didn't either.

 "the tooltip will be hidden only when the mouse leaves the target element",

 but the problem says 

 "the tooltip shows on focus but doesn't hide when element lost focus"

 

isn't losing focus (blur) the same as the mouse leaving the target area?

 

I have a similar problem, the tooltip seems to stick around permanently even with autoHide set to true. I will try the blur solution but would be interested in knowing what the function of autoHide is if not this

 

[Anthony]

I can't edit my post but just to add, my tooltip isn't set to show on focus but on mouseenter

[Anthony]

Sorry, ignore those posts, I'll raise a new post

[balazs]

Sorry Dimiter,

...but the problem with autoHide is an ISSUE.

Showing the tooltip is related to an event (mouse enter, focus). So it should be normal that when that event ends (mouse leaves or focus is lost) that hiding occurs. It might be that your documentation describes (if it describes) the current (in my opinion buggy) behavior.

To my defense I can only add, that f.e. bootstrap's tooltip worked as most people expect (with auto-hiding if focus is lost). I also feel that the possibility to have custom JS functions to set up bootstraps JS was more comfortable.

I had to change:

         // note: extra lines of code are needed to override jQuery tooltip fnc.
        var bootstrapTooltip = $.fn.tooltip.noConflict();
        $.fn.bstooltip = bootstrapTooltip;
        $('[data-toggle=tooltip]').bstooltip({ container: "body" });

to:

        var $tooltips = $('[data-toggle=tooltip]');
        $tooltips.each(function (index, elem) {
            var $elem = $(elem);
            var trigger = $elem.attr('data-trigger');
            var originalTitle = $elem.attr('data-original-title');
            var placement = $elem.attr('data-placement');

            $elem.kendoTooltip({
                autoHide: true,
                showOn: trigger,
                position: placement,
                content: function(e) {
                    var target = e.target;
                    return target.attr('data-original-title');
                }
            });
        });​

[Dimiter Madjarov]

Hello balazs,

As previously discussed this functionality of the Kendo UI Tooltip widget is intended and by design. You could use the blur event to suit it to the current requirements.

Regards,
Dimiter Madjarov
Telerik

 

 

[Jason]

Hi Dimiter,

I have to agree with other posters: if this is by design, then the design does not make sense.  I can't think of any situation where you want to show a tooltip on focus, but then have it hide when the mouse cursor leaves the target element.  In fact the cursor need not be inside the element to give it focus, as you can change focus with the keyboard.  In this situation you need to move the mouse into the element then out again to get the tooltip to hide. The workaround with blur helps, but it doesn't change the fact that the current behaviour is silly. I hope in future Kendo implements the obvious behaviour: i.e. when using showOn focus setting autoHide means hide on blur.

Cheers,

Jason

[Dimiter Madjarov]

Hello Jason,

At the moment we don't have plans to change the current behavior. If you consider that we should improve it, you could post the suggestion at our User Voice portal, where other users could vote for it too.

Regards,
Dimiter Madjarov
Telerik

 

 

[Jason]

Hi Dimiter,

Thanks for the response, I raised a suggestion here:

http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/11157027-make-tooltips-which-showon-focus-autohide-on-blur

Cheers,

Jason