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

Tooltip hiding its element

1 Answer 1375 Views

ToolTip

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

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

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:

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