Tooltip doesn't always remove itself

[sitefinitysteve]

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?

[Rosen]

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

[sitefinitysteve]

See attached

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

...with the idea that if I need a tooltip anywhere just append that class

[Rosen]

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

[sitefinitysteve]

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?

[Rosen]

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

[sitefinitysteve]

Got it, thanks! :)

[Syleps]

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

[Ivan Danchev]

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

[Syleps]

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

[Ivan Danchev]

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

[Syleps]

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

 

[Ivan Danchev]

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

[Syleps]

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

[Syleps]

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 ...

[Ivan Danchev]

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