LIstview Tooltip Hiding when changing item

9 posts, 0 answers
  1. Bryan
    Bryan avatar
    34 posts
    Member since:
    Oct 2014

    Posted 01 Nov Link to this post

    I'm using a kendoTooltip on a Listview with a custom content function set up like this:

    return acontrol.kendoTooltip({
            width: 220,
            height: 280,
            position: "right",
            show: function(e) {},
            autoHide: false,

    showAfter: 1000,

    content: function(e) {},

    hide: function(e) {}

    }).data("kendoTooltip");

     

    I have the autoHide set to false in the tooltip and am setting timeouts on the show function, mouseout, and mousenter of the tooltip itself in order to hide the tooltip after x amount of time, but when I move to the following element, it hides the tooltip anyway.  Putting e.preventDefault()) in the hide function prevents the timeout from hiding the tooltip, but it doesn't stop the tooltip from being hidden on moving to a different item in the listview, even though I see that the content function fires for the new listview item (the show function never does). I need the autoHide set to false as actually trying to work with any of the information within the tooltip is difficult without quickly moving the mouse into the tooltip. How can I work around this? My solution works fine if the tooltip has timed out when moving to the next item, but if the timeout has not expired, it hides it and doesn't display the new data retrieved.

     

     

     

  2. Bryan
    Bryan avatar
    34 posts
    Member since:
    Oct 2014

    Posted 01 Nov in reply to Bryan Link to this post

    OK, so far I'm not getting my exact case to duplicate in the dojo example I'm setting up, but I do notice that without the autoHide set to true, the timeout will not hide the tooltip when you mouseout of the list view.

    https://dojo.telerik.com/aNila

     

     

  3. Bryan
    Bryan avatar
    34 posts
    Member since:
    Oct 2014

    Posted 01 Nov Link to this post

    On further testing, it seems like something in <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> is necessary for the script to work as expected. Since my references are to 3.2, I'm getting the issues described.
  4. Neli
    Admin
    Neli avatar
    59 posts

    Posted 03 Nov Link to this post

    Hello Bryan,

    If the autoHide configuration setting is set to 'false', the ToolTip will not hide if you leave the mouse on the current item or if the mouse hover a content outside the ListView. If another item on the ListView is hovered, the first Tooltip will hide and the Tolltip of the currently hovered item will show. This is the expected behavior, as it is not possible to have multiple ToolTips shown at the same time. 

    In the linked Dojo example the jQuery 3.2.1 version is used, the autohide property is set to 'false' and the tooltip show/hide as expected. 

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Bryan
    Bryan avatar
    34 posts
    Member since:
    Oct 2014

    Posted 03 Nov in reply to Neli Link to this post

    So the expected behavior is that as you mouseover the list in the dojo, it only displays the tooltip on every other item? Because that's what I'm seeing in the linked dojo example. I hover on the first item, it displays the tooltip, i move to the next item in the listview, the first tooltip hides, but the second isn't displayed. I move to the third item, it displays the tooltip. I move to the 4th (or back to the second) and the tooltip is hidden again. 

     

     

  6. Bryan
    Bryan avatar
    34 posts
    Member since:
    Oct 2014

    Posted 03 Nov in reply to Bryan Link to this post

    If I add in the <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> instead of the 3-2, I see the expected behavior you're describing. (e.g., I get a tooltip on every item, not every other item).
  7. Neli
    Admin
    Neli avatar
    59 posts

    Posted 06 Nov Link to this post

    Hello Bryan,

    Latest Kendo UI version requires jQuery version 1.12.3. It is compatible also with 1.10.x, 2.2.x and 3.1.1.
    I am afraid, that jQuery 3.2.1 version is not supported, so such misbehavior is not unexpected. 

    Please find the list with the supported jQuery version here. I would recommend using one of them instead of 3.2.1.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Bryan
    Bryan avatar
    34 posts
    Member since:
    Oct 2014

    Posted 06 Nov in reply to Neli Link to this post

    Thanks, Neli.

    Although, if I'm reading this right, it says the more recent versions are "compatible with 1.10.x, 2.2.x and 3.1.1". I'm still seeing this particular issue when including 3.1.1 rather than 3.2.1, just FYI. 

  9. Neli
    Admin
    Neli avatar
    59 posts

    Posted 07 Nov Link to this post

    Hello Bryan,

    Thank you for notifying us for the problem. 

    I have tested with jQuery 3.1.1 and the Tooltip is not showing on hover on every element.
    The issue is now logged as a bug in our Github and you could track its progress on the following link.

    As a sign of gratitude your Telerik points are now updated.


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top