Tooltip doesn't always remove itself

16 posts, 1 answers
  1. Steve
    Steve avatar
    1871 posts
    Member since:
    Dec 2008

    Posted 24 Apr 2013 Link to this post

    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?
  2. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 26 Apr 2013 Link to this post

    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!
  3. Steve
    Steve avatar
    1871 posts
    Member since:
    Dec 2008

    Posted 26 Apr 2013 Link to this post

    See attached

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

    ...with the idea that if I need a tooltip anywhere just append that class
  4. Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 29 Apr 2013 Link to this post

    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!
  5. Steve
    Steve avatar
    1871 posts
    Member since:
    Dec 2008

    Posted 29 Apr 2013 Link to this post

    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?
  6. Answer
    Rosen
    Admin
    Rosen avatar
    3247 posts

    Posted 29 Apr 2013 Link to this post

    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!
  7. Steve
    Steve avatar
    1871 posts
    Member since:
    Dec 2008

    Posted 29 Apr 2013 Link to this post

    Got it, thanks! :)
  8. Syleps
    Syleps avatar
    8 posts
    Member since:
    Nov 2013

    Posted 15 Aug Link to this post

    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

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1263 posts

    Posted 17 Aug Link to this post

    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.
  10. Syleps
    Syleps avatar
    8 posts
    Member since:
    Nov 2013

    Posted 18 Aug Link to this post

    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

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1263 posts

    Posted 22 Aug Link to this post

    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.
  12. Syleps
    Syleps avatar
    8 posts
    Member since:
    Nov 2013

    Posted 22 Aug in reply to Ivan Danchev Link to this post

    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

     

  13. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1263 posts

    Posted 24 Aug Link to this post

    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.
  14. Syleps
    Syleps avatar
    8 posts
    Member since:
    Nov 2013

    Posted 24 Aug in reply to Ivan Danchev Link to this post

    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

  15. Syleps
    Syleps avatar
    8 posts
    Member since:
    Nov 2013

    Posted 27 Aug Link to this post

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

  16. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1263 posts

    Posted 28 Aug Link to this post

    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.
Back to Top