Popover docs

_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"

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
+<label>
+    Animation Type:
+    <TelerikDropDownList Data="@AnimationTypes"
+                         Value="@SelectedAnimationType"
+                         ValueChanged="@( (AnimationType newValue) => OnDropDownValueChanged(newValue) )"
+                         Width="160px" />
+</label>
+<label>
+    Animation Duration:
+    <TelerikNumericTextBox @bind-Value="@SelectedAnimationDuration"
+                           Min="0"
+                           Max="7000"
+                           Width="100px" />
+</label>
+
+<TelerikButton OnClick="@(() => PopoverRef.Show())">Show Popover</TelerikButton>
+<TelerikButton OnClick="@(() => PopoverRef.Hide())">Hide Popover</TelerikButton>
+
+<TelerikPopover @ref="@PopoverRef"
+              AnchorSelector=".popover-target"
+              AnimationType="@SelectedAnimationType"
+              AnimationDuration="@SelectedAnimationDuration"
+              Width="300px">
+    <PopoverContent>
+        Telerik Blazor Popover
+    </PopoverContent>
+</TelerikPopover>
+
+<div class="popover-target styled-container">
+</div>
+
+@code {
+    private TelerikPopover PopoverRef { get; set; }
+
+    private List<AnimationType> 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<AnimationType>();
+
+        foreach (AnimationType animation in Enum.GetValues(typeof(AnimationType)))
+        {
+            AnimationTypes.Add(animation);
+        }
+
+        base.OnInitialized();
+    }
+}
+
+<style>
+    .styled-container {
+        width: 200px;
+        height: 30px;
+        background-color: yellowgreen;
+        margin-top: 20px;
+    }
+</style>
+````

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 <a href = "https://www.telerik.com/blazor-ui/popover" target="_blank">Blazor Popover component</a> 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 `<TelerikPopover>` tag to a Razor file.
+1. Obtain a `@ref` of the component.
+1. Add the content to the `<PopoverContent>` child tag.
+1. Use the [`Show`](#popover-reference-and-methods) method to display the `<TelerikPopover>`.
+1. (optional) Add a title inside a `<PopoverHeader>` tag. HTML markup and child components are supported, too.
+
+>caption Basic configuration of the Telerik Popover for Blazor
+
+````CSHTML
+<TelerikPopover @ref="@PopoverRef"
+                AnchorSelector=".popover-target">
+    <PopoverContent>
+        I am a Telerik Popover
+    </PopoverContent>
+    <PopoverActions>
+        <TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
+    </PopoverActions>
+</TelerikPopover>
+
+<TelerikButton OnClick="@(() => PopoverRef.Show())" Class="popover-target">Show the Popover</TelerikButton>
+
+@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 <br /> (`Stretch`) | The positioning of the elements in the `<PopoverActions>` 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 <br /> (`SlideDown`) | The type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) |
+| `Collision` | `PopoverCollision` enum <br /> (`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 <br /> (`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` <br /> (`true`) | Defines if the callout is rendered. |
+| `ShowOn` | `PopoverShowEvent` enum <br /> (`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 `<div>` 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. <br /> 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
+<TelerikPopover @ref="@PopoverRef"
+                AnchorSelector=".popover-target">
+    <PopoverContent>
+        I am a Telerik Popover
+    </PopoverContent>
+    <PopoverActions>
+        <TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
+    </PopoverActions>
+</TelerikPopover>
+
+<TelerikButton OnClick="@(() => PopoverRef.Show())" Class="popover-target">Show the Popover</TelerikButton>
+
+@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)

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
+<div>
+    <label>
+        Popover Position
+        <TelerikDropDownList @bind-Value="@PopoverPositionType" Data="@PopoverPositions" Width="200px" />
+    </label>
+</div>
+<div>
+    <label>
+        Popover Collision Type
+        <TelerikDropDownList @bind-Value="@PopoverCollisionType" Data="@PopoverCollisionTypes" Width="200px" />
+    </label>
+</div>
+
+<TelerikPopover @ref="@PopoverRef"
+                AnchorSelector=".popover-target" 
+                Collision="@PopoverCollisionType"
+                Position="@PopoverPositionType">
+    <PopoverContent>
+        I am a Telerik Popover
+    </PopoverContent>
+    <PopoverActions>
+        <TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
+    </PopoverActions>
+</TelerikPopover>
+
+<div class="popover-target styled-container" @onclick="@(_ => PopoverRef.Show())">
+    Popover target. Click in the element to show the Popover.
+</div>
+
+@code{
+    private TelerikPopover PopoverRef { get; set; }
+    private PopoverCollision PopoverCollisionType { get; set; } = PopoverCollision.Fit;
+    private PopoverPosition PopoverPositionType { get; set; } = PopoverPosition.Top;
+
+    private List<PopoverPosition> PopoverPositions { get; set; } = new List<PopoverPosition>()
+    {
+        PopoverPosition.Top,
+        PopoverPosition.Left,
+        PopoverPosition.Right,
+        PopoverPosition.Bottom,
+    };
+
+    private List<PopoverCollision> PopoverCollisionTypes { get; set; } = new List<PopoverCollision>()
+    {
+        PopoverCollision.Fit,
+        PopoverCollision.Flip
+    };
+}
+
+<style>
+    .styled-container {
+        width: 300px;
+        height: 50px;
+        background-color: yellowgreen;
+        margin-top: 20px;
+    }
+</style>
+````