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
0
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:
- Calling .kendoTooltip() on a jQuery object attempts to initialize a Kendo Tooltip widget over this element/element set.
- 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.
- 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 BratanovTelerik 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.