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 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.
The Popover component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Popover
- Add the
<TelerikPopover>tag to a Razor file. - Set the
AnchorSelectorparameter to a CSS selector, which points to the HTML element that the Popover will align with. - Configure how the app will show and hide the Popover component. Use one or both options below:
- Set the
ShowOnparameter to anPopoverShowOnenum value to set which user interaction with the anchor will display the Popover automatically. -
Obtain the component reference with the
@refattribute to show and hide the Popover programmatically.
- Set the
- Add the content to the
<PopoverContent>child tag. - (optional) Configure the Popover
PositionandOffset, or add a title inside the<PopoverHeader>tag.
Basic Telerik Popover for Blazor
<TelerikPopover @ref="@PopoverRef"
AnchorSelector=".popover-target"
ShowOn="@PopoverShowOn.Click"
Position="@PopoverPosition.Bottom"
Offset="20">
<PopoverContent>
Telerik Popover for Blazor
</PopoverContent>
<PopoverActions>
<TelerikButton OnClick="@( () => PopoverRef?.Hide() )"
Icon="@SvgIcon.X">Close</TelerikButton>
</PopoverActions>
</TelerikPopover>
<TelerikButton Class="popover-target">Show Popover Automatically</TelerikButton>
<TelerikButton OnClick="@( () => PopoverRef?.Show() )">Show Popover Programmatically</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...
Popover Animations
Use the available parameters to customize the animation type and its duration. Read more about the Blazor Popover Animations...
Popover Parameters
The Blazor Popover provides parameters to configure the component. Also check the Popover API Reference for a full list of properties.
| Parameter | Type | Description |
|---|---|---|
ActionsLayout |
PopoverActionsLayoutAlign enum ( 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... |
AnimationType |
AnimationType enum ( SlideDown) |
The type of animation when the component displays and hides. Read more about Popover animations... |
Collision |
PopoverCollision enum ( Fit) |
The behavior of the Popover when it doesn't fit in the viewport. Read more about Popover 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... |
ShowCallout |
bool ( true) |
Defines if the callout is rendered. |
ShowOn |
PopOverShowOn? enum ( null) |
The browser event that will display the Popover (MouseEnter or Click) without the need to use component methods. When you set the ShowOn parameter to Click, the Popover will hide when the user clicks outside the component. If the parameter 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. |
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. |
<TelerikPopover @ref="@PopoverRef"
AnchorSelector=".popover-target"
Position="@PopoverPosition.Bottom"
Offset="20">
<PopoverContent>
Telerik Popover for Blazor
</PopoverContent>
<PopoverActions>
<TelerikButton OnClick="@( () => PopoverRef?.Hide() )"
Icon="@SvgIcon.X">Hide</TelerikButton>
</PopoverActions>
</TelerikPopover>
<TelerikButton OnClick="@( () => PopoverRef?.Show() )">Show Popover</TelerikButton>
<TelerikSvgIcon Class="popover-target" Icon="@SvgIcon.QuestionCircle" />
@code{
private TelerikPopover? PopoverRef { get; set; }
}