This is a migrated thread and some comments may be shown as answers.

LIstview Tooltip Hiding when changing item

8 Answers 271 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Bryan
Top achievements
Rank 1
Bryan asked on 01 Nov 2017, 05:34 PM

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.

 

 

 

8 Answers, 1 is accepted

Sort by
0
Bryan
Top achievements
Rank 1
answered on 01 Nov 2017, 07:09 PM

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

 

 

0
Bryan
Top achievements
Rank 1
answered on 01 Nov 2017, 10:57 PM
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.
0
Neli
Telerik team
answered on 03 Nov 2017, 01:44 PM
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.
0
Bryan
Top achievements
Rank 1
answered on 03 Nov 2017, 02:07 PM

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. 

 

 

0
Bryan
Top achievements
Rank 1
answered on 03 Nov 2017, 02:13 PM
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).
0
Neli
Telerik team
answered on 06 Nov 2017, 04:28 PM
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.
0
Bryan
Top achievements
Rank 1
answered on 06 Nov 2017, 05:05 PM

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. 

0
Neli
Telerik team
answered on 07 Nov 2017, 11:23 AM
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.
Tags
ToolTip
Asked by
Bryan
Top achievements
Rank 1
Answers by
Bryan
Top achievements
Rank 1
Neli
Telerik team
Share this question
or