Tooltip Overview
The Tooltip displays a popup hint for a specific HTML element.
Its content can be defined either as static text or loaded dynamically with AJAX. The Tooltip provides default configuration options such as relatively positioning it to the target, events for displaying the widget, auto-hiding behavior, setting its height and width.
The Tooltip is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Tooltip
The Tooltip can be initialized for a single element or for a container where the Tooltip targets are represented by the child elements.
The following example demonstrates how to create a Tooltip for a single target and initialize it.
<div id="target">
Some Content
</div>
$(document).ready(function() {
$("#target").kendoTooltip({ content: "Tooltip content" });
});
The following example demonstrates how to create a Tooltip for multiple targets within a container, initialize it using a jQuery selector, and specify the filter to match the target elements. By default, the Tooltip content is extracted from the title attribute of the target element.
<div id="container">
Some <a href="#" title="Some text">Content</a><br />
Some <a href="#" title="Some other text">More</a> Content <br />
</div>
$(document).ready(function() {
$("#container").kendoTooltip({ filter: "a[title]" });
});
Basic Configuration
The following example demonstrates how to initialize a Tooltip and configure its main properties.
$("#container").kendoTooltip({
position: "right",
height: "300px",
showOn: "click",
autoHide: true,
content: function() {
return "custom text";
},
width: "500px"
});
Functionality and Features
Referencing Existing Instances
To refer to an existing Tooltip instance, use the jQuery.data(). Once a reference is established, use the Tooltip API to control its behavior.
The following example demonstrates how to access an existing Tooltip instance.
var tooltip = $("#target").data("kendoTooltip");