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

The popover component is a UI element that displays additional content or options when the anchor element is hovered, clicked, or focused. It represents a popup that provides contextually relevant information, menus, or controls without navigating to a new page or interrupting the user's current workflow. Popovers are often used to enhance user interaction and provide quick access to additional details or actions within an application or website.

### Live Demo

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

### Appearance

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

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

#### Anatomy

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

<BlueprintImage data='{"description":"","labels":[{"text":"Title"},{"text":"Content area"},{"text":"Action button"},{"text":"Callout"},{"text":"Popover header"},{"text":"Popover body"},{"text":"Popover actions"},{"text":"Anchor element"}]}'>![A Telerik and Kendo UI Popover component showing the content area, action button, callout, popover header, popover body, popover actions, and anchor element](images/components-popover-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Popover component")</BlueprintImage>

#### Position

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

* Top—The Popover will appear above the anchor element.
* Right—The Popover will appear to the right of the anchor element.
* Left—The Popover will appear to the left of the anchor element.
* Bottom—The Popover will appear below the anchor element.

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

### Framework-Specific Documentation

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

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

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

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

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

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

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

</Wrap>