Tooltip hiding its element

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

    Posted 29 Jan 2017 Link to this post


    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>
            <meta charset="utf-8">
            <title>Tooltip hide test</title>
            <script src=""></script>
            <link rel="stylesheet" href="">
            <script src=""></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() {
            <div id="container">
                <input type="text" id="inputfield" class="mytooltip">
            <button id="hideTooltip" style="margin-top: 30px;">Hide tooltip</button>


    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
    Marin Bratanov avatar
    5922 posts

    Posted 31 Jan 2017 Link to this post


    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 () {


    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:
    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: as explained here:



    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