Tooltip hiding its element

2 posts, 0 answers
  1. Tayger
    Tayger avatar
    68 posts
    Member since:
    Jan 2015

    Posted 29 Jan Link to this post

    Hello 

    I'm using KendoUI Tooltip and attach them by class name, what works fine. There are now situations I have to hide Tooltips. So therefore I thought I can use the hide function of Tooltip but it hides its element as well:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Tooltip hide test</title>
     
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
            <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
     
            <script>
                $(document).ready(function() {
                    // Attach tooltip to all elements with class = mytooltip
                    $(".mytooltip").kendoTooltip({ content: 'Enter something here' });
     
                    // Hide tooltip on clicking button
                    $("#hideTooltip").click(function() {
                        $(".mytooltip").kendoTooltip().hide();
                    });
                });
            </script>
        </head>
        <body>
     
            <div id="container">
                <input type="text" id="inputfield" class="mytooltip">
            </div>
     
            <button id="hideTooltip" style="margin-top: 30px;">Hide tooltip</button>
     
        </body>
    </html>

     

    This code sample does show an input element on which a Tooltip is attached, works fine. If you then press the button that should hide the Tooltip it also hides the input element. What am I doing wrong?

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3674 posts

    Posted 31 Jan Link to this post

    Hi,

    Put shortly, you need to get a reference to the widget first:

    $(".mytooltip").kendoTooltip({ content: 'Enter something here', autoHide: false });
     
    // Hide tooltip on clicking button
    $("#hideTooltip").click(function () {
        $(".mytooltip").data("kendoTooltip").hide();
    });

     

    Here is what happens:

    1. Calling .kendoTooltip() on a jQuery object attempts to initialize a Kendo Tooltip widget over this element/element set. 
    2. The kendoTooltip() method returns the jQuery element/set to allow chaining. You can read more here: http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization.
    3. Thus, the hide() method is called on the element over which the tooltip is initialized, but this is not the tooltip's own hide() method: http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip#methods-hide as explained here: http://docs.telerik.com/kendo-ui/controls/layout/tooltip/overview#reference.

     

    Regards,

    Marin Bratanov
    Telerik by Progress
    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