# ASP.NET Core Tooltip Overview

The Telerik UI Tooltip TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Tooltip widget.

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.

* [Demo page for the Tooltip HtmlHelper](https://demos.telerik.com/aspnet-core/tooltip/index)

* [Demo page for the Tooltip TagHelper](https://demos.telerik.com/aspnet-core/tooltip/tag-helper)

## Initializing the Tooltip

The following example demonstrates how to define the Tooltip.

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

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

```Razor TagHelper
    <kendo-tooltip name="agglomerations" filter="span"></kendo-tooltip>
```

## Basic Configuration

The following example demonstrates the basic configuration of the Tooltip HtmlHelper.

```Razor HtmlHelper
    <span id="tooltip" class="k-button wider">
        <a 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>

        function onHide() {
            // Hide Event function handler
        }

        function onShow() {
            // Show Event function handler
        }
    </script>
```

```Razor TagHelper
    <kendo-tooltip name="agglomerations" filter="span" position="top" width="120">
        <popup-animation>
            <open effects="fade:in" duration="300" />
        </popup-animation>
    </kendo-tooltip>
```

## Functionality and Features

* [Content Template](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/content)
* [Loading content with AJAX](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/content)

## Events

For a complete example on basic Tooltip events, refer to the [demo on using the events of the Tooltip](https://demos.telerik.com/aspnet-core/tooltip/events).

## Referencing Existing Instances

To reference an existing Tooltip instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) configuration option. Once a reference is established, use the [Tooltip client-side API](https://docs.telerik.com/kendo-ui/api/ui/tooltip#methods) to control its behavior.

```
    // Place the following after your Telerik UI Tooltip for ASP.NET Core declaration.
    <script>
        $(document).ready(function() {
            // The For() configuration option of the Tooltip is used to get its client-side instance.
            var tooltip = $("#tooltip").data("kendoTooltip");
        });
    </script>
```

## See Also

* [Basic Usage of the Tooltip HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/tooltip)

* [Basic Usage of the Tooltip TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/tooltip/index)

* [Tooltip in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/razor-page)

* [Using the API of the Tooltip HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/tooltip/api)

* [Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/tooltip)

* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/tooltip)