Tooltips are activated on hover, focus, or click, and display brief informative text or guidance about the respective element.

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

Theme Color


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.


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

  1. Content area
  2. Remove icon (optional)
  3. Callout (optional)
  4. Anchor component


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
  1. Non-closable Tooltip with callout
  2. Closable Tooltip with callout
  3. Non-closable Tooltip
  4. Closable Tooltip


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

  • Top—The Tooltip shows above the anchor element.
  • Right—The Tooltip shows to the right of the anchor element.
  • Left—The Tooltip shows to the left of the anchor element.
  • Bottom—The Tooltip shows below the anchor element.
  1. Top
  2. Right
  3. Left
  4. Bottom


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—Applies the primary theme color to the Tooltip component.
  • secondary—Applies the secondary theme color to the Tooltip component.
  • tertiary—Applies the tertiary theme color to the Tooltip component.
  • info—Applies the info theme color to the Tooltip component.
  • success—Applies the success theme color to the Tooltip component.
  • warning—Applies the warning theme color to the Tooltip component.
  • error—Applies the error theme color to the Tooltip component.
  • none—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: