---
title: Overview
position: 1
seo_title: Overview of the Tooltip Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Tooltip component and its types, check out the extensive set of available
  options in its live demo, and change its appearance by setting the variant and
  the position of the component.
---
## Tooltip Overview

The Tooltip component is a discreet yet informative user interface (UI) element designed to enhance user understanding and interaction. It displays as a small, floating box containing explanatory text or information, typically triggered when a user hovers over, focuses on, or taps a specific interface element. Tooltips are ideal for providing additional context or brief instructions without cluttering the interface. Their temporary, on-demand nature ensures that users receive just the right amount of information at the right time, improving the overall usability and accessibility of the application or website.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/tooltips/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/tooltip/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/tooltip/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/tooltip/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/tooltip/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/tooltip"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/tooltip"}],"demo":"components/tooltip/overview"}'></LiveDemo>

### Appearance

Tooltips provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI Tooltip, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### Anatomy

The anatomy of the Tooltip summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Content area"},{"text":"Remove icon (optional)"},{"text":"Callout (optional)"},{"text":"Anchor component"}]}'>![A Telerik and Kendo UI Tooltip component showing the content area, remove icon, callout, and anchor element](images/components-tooltip-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Tooltip component")</BlueprintImage>

#### Variants

Depending on the elements they display, the Telerik and Kendo UI Tooltip can be any of the following types:

* Non-closable Tooltip with callout
* Closable Tooltip with callout
* Non-closable Tooltip
* Closable Tooltip

<BlueprintImage data='{"description":"","labels":[{"text":"Non-closable Tooltip with callout"},{"text":"Closable Tooltip with callout"},{"text":"Non-closable Tooltip"},{"text":"Closable Tooltip"}]}'>![A Telerik and Kendo UI Tooltip component and its possible variants including non-closable Tooltip with callout, closable Tooltip with callout, non-closable Tooltip, and closable Tooltip](images/components-tooltip-overview-variants.png "The four possible variants of the Telerik and Kendo UI Tooltip component")</BlueprintImage>

#### Position

Depending on the position according to its anchor element, the Telerik and Kendo UI Tooltips can be any of the following types:

* Top&mdash;The Tooltip shows above the anchor element.
* Right&mdash;The Tooltip shows to the right of the anchor element.
* Left&mdash;The Tooltip shows to the left of the anchor element.
* Bottom&mdash;The Tooltip shows below the anchor element.

<BlueprintImage data='{"description":"","labels":[{"text":"Top"},{"text":"Right"},{"text":"Left"},{"text":"Bottom"}]}'>![A Telerik and Kendo UI Tooltip component and its possible positions including top, right, left, and bottom](images/components-tooltip-overview-position.png "The four possible positions of the Telerik and Kendo UI Tooltip component")</BlueprintImage>

#### Color

The Tooltip provides the `theme-color` configuration option that enables you to choose among the available, built-in colors that will be applied to it. Tooltips also provide options for color customization.

`themeColor` provides the following available options:

* `base` (default)
* `primary`&mdash;Applies the primary theme color to the Tooltip component.
* `secondary`&mdash;Applies the secondary theme color to the Tooltip component.
* `tertiary`&mdash;Applies the tertiary theme color to the Tooltip component.
* `info`&mdash;Applies the info theme color to the Tooltip component.
* `success`&mdash;Applies the success theme color to the Tooltip component.
* `warning`&mdash;Applies the warning theme color to the Tooltip component.
* `error`&mdash;Applies the error theme color to the Tooltip component.
* `none`&mdash;Does not set a `themeColor` and allows you to add your own, custom value.

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Tooltip","description":"Find more information about the Kendo UI for Angular Tooltip in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/tooltips/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Tooltip","description":"Find more information about the Telerik UI for Blazor Tooltip in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/tooltip/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Tooltip","description":"Find more information about the Kendo UI for jQuery Tooltip in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/tooltip/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Tooltip","description":"Find more information about the KendoReact Tooltip in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/tooltip/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Tooltip","description":"Find more information about the Kendo UI for Vue Tooltip in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/tooltip/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Tooltip","description":"Find more information about the Telerik UI for ASP.NET Core Tooltip component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/tooltip/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Tooltip","description":"Find more information about the Telerik UI for ASP.NET MVC Tooltip component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/tooltip/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>