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

15 posts, 0 answers
  1. Fernando
    Fernando avatar
    56 posts
    Member since:
    Sep 2012

    Posted 21 Nov 2014 Link to this post

    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"
  2. Fernando
    Fernando avatar
    56 posts
    Member since:
    Sep 2012

    Posted 21 Nov 2014 Link to this post

    BTW, this fixed:

    $(element).on("blur", function()
    {
        $(this).data("kendoTooltip").hide();
    });
  3. Kendo UI is VS 2017 Ready
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 24 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Fernando
    Fernando avatar
    56 posts
    Member since:
    Sep 2012

    Posted 25 Nov 2014 in reply to Dimiter Madjarov Link to this post

    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.
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 25 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Fernando
    Fernando avatar
    56 posts
    Member since:
    Sep 2012

    Posted 25 Nov 2014 in reply to Dimiter Madjarov Link to this post

    Ok.

    Just by curiosity: That was considered an issue or we should get used to that workaround?
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 26 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 30 Jun 2015 in reply to Dimiter Madjarov Link to this post

    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

     

  10. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 30 Jun 2015 in reply to Anthony Link to this post

    I can't edit my post but just to add, my tooltip isn't set to show on focus but on mouseenter
  11. Anthony
    Anthony avatar
    122 posts
    Member since:
    Jun 2013

    Posted 30 Jun 2015 in reply to Anthony Link to this post

    Sorry, ignore those posts, I'll raise a new post
  12. balazs
    balazs avatar
    13 posts
    Member since:
    Dec 2014

    Posted 01 Sep 2015 in reply to Dimiter Madjarov Link to this post

    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');
                    }
                });
            });​

  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 02 Sep 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Jason
    Jason avatar
    4 posts
    Member since:
    Mar 2015

    Posted 17 Dec 2015 in reply to Dimiter Madjarov Link to this post

    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

  15. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 18 Dec 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  16. Jason
    Jason avatar
    4 posts
    Member since:
    Mar 2015

    Posted 20 Dec 2015 in reply to Dimiter Madjarov Link to this post

    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     

Back to Top
Kendo UI is VS 2017 Ready