diff --git a/_config.yml b/_config.yml
index f992aa6ecc..7899259320 100644
--- a/_config.yml
+++ b/_config.yml
@@ -394,6 +394,8 @@ navigation:
title: "Notification"
"*popup":
title: "Popup"
+ "*popover":
+ title: "Popover"
"*numerictextbox":
title: "NumericTextBox"
"*pdfviewer":
@@ -626,6 +628,7 @@ intro_columns:
"Notification": "notification-overview"
"Progress Bar": "progressbar-overview"
"Chunk Progress Bar": "chunkprogressbar-overview"
+ "Popover": "popover-overview"
"Tooltip": "tooltip-overview"
-
title: "Documents"
diff --git a/components/popover/animation.md b/components/popover/animation.md
new file mode 100644
index 0000000000..9413a3d523
--- /dev/null
+++ b/components/popover/animation.md
@@ -0,0 +1,117 @@
+---
+title: Animation
+page_title: Popover Animation
+description: Explore the animation settings of the Popover for Blazor. Discover how to adjust the way the Popover appears and disappears on the screen.
+slug: popover-animation
+tags: telerik,blazor,popover,animation
+published: True
+position: 35
+---
+
+# Popover Animation Settings
+
+This article outlines the available settings that allow you to customize the animations when the Popover displays and hides.
+
+## Type
+
+You can change the way the Popover component flows in and out of the screen by setting the `AnimationType` parameter to a member of the `AnimationType` enum:
+
+* `None`
+* `Fade`
+* `PushUp`
+* `PushDown`
+* `PushLeft`
+* `PushRight`
+* `RevealVertical`
+* `SlideUp`
+* `SlideIn`
+* `SlideDown` (default)
+* `SlideRight`
+* `SlideLeft`
+* `ZoomIn`
+* `ZoomOut`
+
+The [example](#example) below lets you customize the available `AnimationType` parameters and see how they affect the Popover component.
+
+## Duration
+
+Set the `AnimationDuration` parameter in milliseconds as `int` to control how long the animation will take until the component is fully displayed.
+
+The [example](#example) below lets you customize the available `AnimationDuration` parameter and see how it affects the Popover component.
+
+## Example
+
+The following example lets you experiment with the available settings that control the animation in the Popover. It starts with the default component behavior.
+
+````CSHTML
+
+
+
+Show Popover
+Hide Popover
+
+
+
+ Telerik Blazor Popover
+
+
+
+
+
+
+@code {
+ private TelerikPopover PopoverRef { get; set; }
+
+ private List AnimationTypes { get; set; }
+
+ private AnimationType SelectedAnimationType { get; set; } = AnimationType.SlideDown;
+
+ private int SelectedAnimationDuration { get; set; } = 300;
+
+ private void OnDropDownValueChanged(AnimationType newAnimationType)
+ {
+ PopoverRef.Hide();
+
+ SelectedAnimationType = newAnimationType;
+
+ PopoverRef.Show();
+ }
+
+ protected override void OnInitialized()
+ {
+ AnimationTypes = new List();
+
+ foreach (AnimationType animation in Enum.GetValues(typeof(AnimationType)))
+ {
+ AnimationTypes.Add(animation);
+ }
+
+ base.OnInitialized();
+ }
+}
+
+
+````
diff --git a/components/popover/overview.md b/components/popover/overview.md
new file mode 100644
index 0000000000..fcb836fda6
--- /dev/null
+++ b/components/popover/overview.md
@@ -0,0 +1,115 @@
+---
+title: Overview
+page_title: Popover Overview
+description: Discover the Blazor Popover. Learn how to add the component to your app and explore its features like adding content, execute actions, positioning and collision, and animation customization.
+slug: popover-overview
+tags: telerik,blazor,popover,pop,over
+published: True
+position: 0
+---
+
+# Blazor Popover Overview
+
+The Blazor Popover component behaves much like a tooltip, as it helps you display additional information in a container that shows on top of the other page content. The major differences between the Popover and the [Tooltip]({%slug tooltip-overview%}) components is that the Popover has built-in support for action buttons and provides more configuration options about its animation and placement on the screen. This article explains how to start using the component and describes its features.
+
+## Creating Blazor Popover
+
+1. Add the `` tag to a Razor file.
+1. Obtain a `@ref` of the component.
+1. Add the content to the `` child tag.
+1. Use the [`Show`](#popover-reference-and-methods) method to display the ``.
+1. (optional) Add a title inside a `` tag. HTML markup and child components are supported, too.
+
+>caption Basic configuration of the Telerik Popover for Blazor
+
+````CSHTML
+
+
+ I am a Telerik Popover
+
+
+ Close
+
+
+
+Show the Popover
+
+@code{
+ private TelerikPopover PopoverRef { get; set; }
+}
+````
+
+## Popover Positioning and Collision
+
+Use the available positioning and collision settings to customize how the Popover positions itself and reacts to insufficient space in the viewport. [Read more about the Blazor Popover Positioning and Collision...]({%slug popover-position-collision%})
+
+## Popover Animations
+
+Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popover Animations...]({%slug popover-animation%})
+
+## Popover Parameters
+
+The Blazor Popover provides parameters to configure the component. Also check the [Popover API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopover) for a full list of properties.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Description |
+| ----------- | ----------- | ----------- |
+| `ActionsLayout` | `PopoverActionsLayoutAlign ` enum (`Stretch`) | The positioning of the elements in the `` child tag. The possible values are `Stretch`, `Start`, `Center`, and `End`. |
+| `AnchorSelector` | `string` | The CSS selector targeting the element that the Popover uses as an anchor. |
+| `AnimationDuration` | `int` | The duration of the animation in milliseconds. [Read more about Popover animations...]({%slug popover-animation%}) |
+| `AnimationType` | `AnimationType` enum (`SlideDown`) | The type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) |
+| `Collision` | `PopoverCollision` enum (`Fit`) | The behavior of the Popover when it doesn't fit in the viewport. [Read more about Popover collision...]({%slug popover-position-collision%}) |
+| `Offset` | `double ` | The space between the Popover and its anchor in pixels. |
+| `Position` | `PopoverPosition ` enum (`Top`) | The position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) |
+| `ShowCallout` | `bool` (`true`) | Defines if the callout is rendered. |
+| `ShowOn` | `PopoverShowEvent` enum (`Click`) | The browser event that will display the Popover (`MouseEnter` or `Click`). When you set the `ShowOn` parameter to `Click`, the Popover will hide when the user clicks outside the component. If the parameter's value is `MouseEnter`, the Popover will hide when the mouse pointer leaves. |
+
+### Styling and Appearance
+
+The following parameters enable you to customize the appearance of the Blazor Popover:
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `Class` | `string` | The custom CSS class to be rendered on the `
` element, which wraps the component `ChildContent`. Use for [styling customizations]({%slug themes-override%}). |
+| `Height` | `string` | The height of the Popover. |
+| `Width` | `string` | The width of the Popover. |
+
+## Popover Reference and Methods
+
+To execute Popover methods, obtain a reference to the component instance with `@ref`.
+
+| Method | Description |
+|---------|-------------|
+| `Refresh` | Use this method to programmatically re-render the Popover. The Popover is rendered as a child of the `TelerikRootComponent`, instead of where it is declared. As a result, it doesn't automatically refresh when its content is updated. In such cases, the `Refresh` method comes in handy to ensure that the Popover content is up-to-date. |
+| `Show` | Use this method to display the Popover. |
+| `Hide` | Use this method to close the Popover. |
+
+````CSHTML
+
+
+ I am a Telerik Popover
+
+
+ Close
+
+
+
+Show the Popover
+
+@code{
+ private TelerikPopover PopoverRef { get; set; }
+}
+````
+
+## Next Steps
+
+* [Explore the Popover Positioning and Collision Settings]({%slug popover-position-collision%})
+* [Customize the Popover Animations]({%slug popover-animation%})
+
+## See Also
+
+* [Live Popover Demos](https://demos.telerik.com/blazor-ui/popover/overview)
+* [Popover API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopover)
diff --git a/components/popover/position-collision.md b/components/popover/position-collision.md
new file mode 100644
index 0000000000..ddda75b8df
--- /dev/null
+++ b/components/popover/position-collision.md
@@ -0,0 +1,95 @@
+---
+title: Position and Collision
+page_title: Popover Position and Collision
+description: Discover the placement settings of the Popover for Blazor. Learn how to configure the Popover position and handle collisions.
+slug: popover-position-collision
+tags: telerik,blazor,popover,popover,align,position,collision
+published: True
+position: 10
+---
+
+# Popover Position and Collision Settings
+
+This article outlines the available settings which enable you to control the position of the Popover based on its anchor and dictate how the component responds to insufficient screen space.
+
+## Position
+
+To customize how the popover aligns with its anchor element, use the `Position` parameter and set its value to a member of the `PopoverPosition` enum:
+
+* `Top` (default value)
+* `Bottom`
+* `Left`
+* `Right`
+
+The [example](#example) below lets you customize the available `Position` parameters and see how they affect the Popover component.
+
+## Collision
+
+To define how the Popover reacts to insufficient screen space, set the `Collision` parameter to a member of the `PopoverCollision` enum:
+
+* `Fit`—The Popover will shift until it is fully visible on the screen.
+* `Flip`—The Popover will render on the other side of the anchor.
+
+## Example
+
+The following example lets you experiment with the available settings that control the position and collision behavior of the Popover. It starts with the default component behavior.
+
+````CSHTML
+
+
+
+
+
+
+
+
+
+ I am a Telerik Popover
+
+
+ Close
+
+
+
+
+ Popover target. Click in the element to show the Popover.
+