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.

Kendo UI for jQuery Kendoka image

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

$(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 />

$(document).ready(function() {
    $("#container").kendoTooltip({ filter: "a[title]" });

Basic Configuration

The following example demonstrates how to initialize a Tooltip and configure its main properties.

    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 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");

See Also

In this article