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

Tooltip doesn't always remove itself

15 Answers 1748 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
sitefinitysteve asked on 24 Apr 2013, 01:41 PM
http://screencast.com/t/QEp6FWPyLT

This happens on the header and footer...

It's a UL\LI with the tooltip applied to the LI

Any ideas?

15 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 26 Apr 2013, 02:30 PM
Hi Steve,

Are you using one instance of the Tooltip with a filter or multiple Tooltip widgets (one for each selected element). If the later is true, then you will need to close the other Tooltip instances manually, in order to ensure that only one instance is open at a time. This can be achieve via the show event as shown in this sample.

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 26 Apr 2013, 03:05 PM
See attached

The script just calls
$(".tooltip").kendoTooltip();

...with the idea that if I need a tooltip anywhere just append that class
0
Rosen
Telerik team
answered on 29 Apr 2013, 06:04 AM
Hi Steve,

In such case you are using multiple tooltip instances and you should manually close them, as shown in my previous post. However, if the widget is instantiated over a single element which contains the elements for tooltipification, and the appropriate filter is set, then popup will be close automatically.

$("#container").kendoTooltip({
    filter: ".tooltip"
});

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 29 Apr 2013, 12:05 PM
I'm sorry Rosen, I don't understand...

I can't just tell elements to be tooltips, I have to pass in a parent and filter to the elements?

So in this case
$("body").kendoTooltip({
    filter: ".tooltip"
});
I don't understand why it was build this way?
0
Accepted
Rosen
Telerik team
answered on 29 Apr 2013, 01:54 PM
Hello Steve,

You can use both ways to instantiate ToolTip widget. However, in the first case as the selector returns multiple elements, thus multiple kendoTooltip instances will be created. As opposite to the container/filter approach, where a single instance of the Tooltip is created and a single popup is position dynamically at the appropriate targets - a shared tooltip.

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 29 Apr 2013, 01:56 PM
Got it, thanks! :)
0
Syleps
Top achievements
Rank 1
Veteran
answered on 15 Aug 2017, 09:19 AM

Hi,

It's a old ticket, but the issue is still there.

If you take the previous sample and you replace autoHide: false by autoHide:true, sometimes tooltyp doesn't hide

 

Regards

0
Ivan Danchev
Telerik team
answered on 17 Aug 2017, 07:02 AM
Hello,

Could you specify step-by-step the user actions that are needed for the ToolTip to remain visible and not hide? Here's a dojo example, which uses the linked examples logic, but loads the latest version of the Kendo UI js and CSS files. As shown in this short screencast the ToolTip hides when you move the cursor away from the divs.

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Syleps
Top achievements
Rank 1
Veteran
answered on 18 Aug 2017, 09:06 AM

Hi,

After several hours to find the problem I had, I succed to find a case of error. See this Sample

This seems to be a problem with the data-role and role of Kendo buttons, but ... (I use .NET ASP.MVC C#)

Regards

0
Ivan Danchev
Telerik team
answered on 22 Aug 2017, 07:43 AM
Hi,

I gave the linked dojo example a try in Chrome, Firefox and IE11 and was unable to reproduce the ToolTip remaining open when the buttons are not hovered in neither of them. At your end are you able to replicate the issue in all browsers or it is browser-specific?
The MVC ToolTip:
@(Html.Kendo().Tooltip()
    .For("[title]:not([title='']")
    .AutoHide(true)
    .Events(e => e.Show("show"))
)
behaved the same way.
Is there any specific chain of actions (hovering, clicking the buttons,etc.) that needs to be followed in order for the issue to be exhibited? Also, are you using the latest official Kendo UI version (2017.2.621)?

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Syleps
Top achievements
Rank 1
Veteran
answered on 22 Aug 2017, 10:26 AM

Hi,

Indeed, the example I gave now works correctly on Chrome & FF. And more than that, in my screens, the tooltips work on the buttons. It's incomprehensible ... The issue is still here with IE11 (see attachment).
There are still some issues with grid columns, for all browsers (see attachment)

Of course, I use Kendo 2017.2.621. Here is the beginning of my pages

<script src="/Scripts/kendo/2017.2.621/jquery.min.js"></script>
<script src="/Scripts/polyfill-resize.js"></script>
<script src="/Scripts/kendo/2017.2.621/angular.min.js"></script>
<script src="/Scripts/kendo/2017.2.621/jszip.min.js"></script>
<script src="/Scripts/kendo/2017.2.621/kendo.all.min.js"></script>
<script src="/Scripts/cultures/kendo.culture.fr-FR.min.js"></script>
<script src="/Scripts/messages/kendo.messages.fr-FR.min.js"></script>
<script src="/Scripts/kendo/2017.2.621/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/kendo.modernizr.custom.js"></script>


Regards

 

0
Ivan Danchev
Telerik team
answered on 24 Aug 2017, 10:38 AM
Hi,

Here's a dojo example, and screencast which show how the ToolTip behaves in IE11 (no difference in Chrome and FF) at my end when displayed for the Grid's columns. Could you modify it accordingly, demonstrating the problematic behavior in question?

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Syleps
Top achievements
Rank 1
Veteran
answered on 24 Aug 2017, 12:53 PM

Hi,

In your example, you have a kendo tooltip only on the "columns settings" but not on the "column header" (for example Order ID).

The title attribute appears only on the hover of the column, which means that it is not taken by the "$document.ready" and thus it is the tooltip of the browser that appears.

 

In my case, I put the title attribute to all my columns to get help for the user, and that is therefore visible by the "$document.ready".

In ASP.NET :

 gridColumn.HeaderHtmlAttributes(new { @title = col.HintText });

 

Then I have "nested titles". Something like 

<th ... title="Column header" ... data-role="columnsorter">
<a ... title="Column settings" ... data-role="tooltip">
 </a></th>

 

Consequences : Kendo tooltips don't work correctly  (I presume)

But browser tooltips do.

 

I tried using a single tooltip on body, then use the filters but I did not succeed

$(body).kendoTooltip({ 
              autoHide: true,
             filters :'[title]:not([title=""])'
...

 

Regards

0
Syleps
Top achievements
Rank 1
Veteran
answered on 27 Aug 2017, 09:50 AM

Hi,

I thought I'd find the solution by doing this:

var tooltip=$('body').kendoTooltip({
    filter :'[title]:not([title=""])',
    autoHide: true
 });

 

But the problem is that the tooltip kendo deletes the title of the field to display, but doesn't restore it systematically at the time of the hide. This makes the tooltip no longer appear ...

0
Ivan Danchev
Telerik team
answered on 28 Aug 2017, 10:48 AM
Hi,

Could you give the following initialization a try, at my end it works for both the column header and the settings button:
$('.k-grid-header th.k-header').kendoTooltip({
    filter: "a",
    autoHide: true,
  //...


Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 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
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Answers by
Rosen
Telerik team
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Syleps
Top achievements
Rank 1
Veteran
Ivan Danchev
Telerik team
Share this question
or