Demos About Pricing Try now
Edit this page

Tooltip HtmlHelper Overview

The Tooltip HtmlHelper extension is a server-side wrapper for the Kendo UI Tooltip widget.

It allows you to configure the Kendo UI Tooltip widget from server-side code. The Tooltip displays a popup hint for a given html element. Its content can be defined either as static text, or loaded dynamically via AJAX.

For more information on the HtmlHelper, refer to the article on the Tooltip HtmlHelper for ASP.NET MVC.

Basic Usage

The following example demonstrates how to define the Tooltip by using the Tooltip HtmlHelper.

Example
   <span id="tooltip" class="k-button wider">Hover me!</span>

    @(Html.Kendo().Tooltip()
        .For("#tooltip")
        .Position(TooltipPosition.Top)
        .Content("Hello!")
    )

Configuration

The following example demonstrates the basic configuration of the Tooltip HtmlHelper and how to get the Tooltip instance.

    <span id="tooltip" class="k-button wider">
      <а href="#">Hover me</a>
    </span>

    @(Html.Kendo().Tooltip()
        .For("#tooltip")
        .Position(TooltipPosition.Top)
        .Content("Hello!")
        .Width(120)
        .AutoHide(false)
        .Filter("a")
        .Events(events => events.Hide("onHide").Show("onShow"))
    )

    <script type="text/javascript">
        $(function () {
            //Notice that the Name() of the Tooltip is used to get its client-side instance.
            var tooltip = $("#tooltip").data("kendoTooltip");
            console.log(tooltip);
        });
    </script>

See Also