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

Tooltip hiding its element

1 Answer 531 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 29 Jan 2017, 07:15 PM

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?

 

 

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 31 Jan 2017, 05:05 PM

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.
Tags
ToolTip
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or