Tooltip

Description

A Tooltip displays popup hint for a given html element. Its content can be defined either as static text or loaded dynamically via AJAX.

Official Kendo UI Tooltip documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

This example demonstrates passing basic options to the Tooltip plugin.

<div data-bind="kendoTooltip: { content: tipText }">
    Tooltip Content
</div>
var ViewModel = function() {
   this.tipText = "I am a tooltip!";
};

                            ko.applyBindings(new ViewModel());
Tooltip Content

This example demonstrates using the filter configuration option.

<div data-bind="kendoTooltip: { filter: tipFilter }">
  Some <a href="#" title="Some text">Content</a><br />
  Some <a href="#" title="Some other text">More</a> Content <br />
</div>
var ViewModel = function() {
   this.tipFilter = "a[title]";
};

                            ko.applyBindings(new ViewModel());
Some Content
Some More Content

This example demonstrates setting global options in ko.bindingHandlers.kendoTooltip.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<div data-bind="kendoTooltip: { content: tipText }">
    Tooltip Content
</div>
var ViewModel = function() {
   this.tipText = "I am a tooltip!";
};

ko.bindingHandlers.kendoTooltip.options = {
   autoHide: false,
   callout: true,
   height: 50,
   width: 250,
   position: "left"
};

                            ko.applyBindings(new ViewModel());
Tooltip Content

Live Options

The kendoTooltip.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
content

The content of the tooltip

filter

a filter selector that specifies the source of the tooltip texts

widget

If specified, will populate an observable with a reference to the actual widget