Blazor Popup Overview

Updated on Jun 24, 2026

The Blazor Popup component helps you easily display a popup for a target element (anchor) in your application. You can use the Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features.

Creating Blazor Popup

1. Add the <TelerikPopup> tag to a Razor file.
2. Set the AnchorSelector parameter to a CSS selector, which points to the HTML element that the Popup will align with.
3. Obtain the Popup reference to show and hide the component programmatically.
4. (optional) Set HideOnOutsideClick to true if you want the Popup to close automatically when the user clicks somewhere outside the Popup and the anchor. In this case, also handle the OnHide event if you want to track the Popup state.
5. (optional) Set the Popup Width and Height, or configure animations.

Basic Telerik Popup for Blazor

<TelerikPopup @ref="@PopupRef"
              AnchorSelector=".popup-target"
              AnimationType="@AnimationType.SlideDown"
              AnimationDuration="200"
              Width="200px">
    <div style="text-align: center; padding: 2em 0;">
        <p>Telerik Popup for Blazor</p>
        <TelerikButton OnClick="@(() => PopupRef?.Hide())">Hide Popup</TelerikButton>
    </div>
</TelerikPopup>

<TelerikButton OnClick="@(() => PopupRef?.Show())"
               Class="popup-target">Show Popup</TelerikButton>

@code {
    private TelerikPopup? PopupRef { get; set; }
}

Positioning and Collision

Use the available positioning and collision settings to customize how the Popup positions and reacts to insufficient space in the viewport. Read more about the Blazor Popup Positioning and Collision...

Animations

Use the available parameters to customize the animation type and its duration. Read more about the Blazor Popup animations....

Events

The Popup exposes events that enable your app to react to user actions.

Popup Parameters

The Blazor Popup provides parameters to configure the component. Also check the Popup API Reference for a full list of properties, methods and events.

Parameter	Type	Description
AnchorHorizontalAlign	PopupAnchorHorizontalAlign enum (Left)	Defines how the anchor aligns with the Popup component on the horizontal plane. Read more about Popup Positioning.
AnchorSelector	string	The CSS selector for the anchor element of the Popup.
AnchorVerticalAlign	PopupAnchorVerticalAlign enum (Bottom)	Defines how the anchor aligns with the Popup on the vertical plane. Read more about Popup Positioning..
AnimationDuration	int	The duration of the animation in milliseconds. Read more about Popup animations.
AnimationType	AnimationType enum (SlideDown)	The type of animation when the component displays and hides. Read more about Popup animations.
HorizontalAlign	PopupHorizontalAlign enum (Left)	Determines if the left or the right side of the Popup will touch its anchor. Read more about Popup Positioning.
HorizontalCollision	PopupCollision enum (Fit)	Sets the behavior of the Popup when it doesn't fit in the viewport based on the horizontal plane. Read more about Popup collision behavior.
HorizontalOffset	double	The horizontal space between the Popup and its anchor in pixels.
VerticalAlign	PopupVerticalAlign enum (Top)	Determines if the Popup will touch the anchor with its top, bottom, or center. Read more about Popup Positioning.
VerticalCollision	PopupCollision enum (Flip)	Defines the behavior of the Popup when it doesn't fit in the viewport based on the vertical plane. Read more about Popup collision behavior.
VerticalOffset	double	The vertical space between the Popup and its anchor in pixels.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Popup:

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 Popup.
Width	string	The width of the Popup. If not set, the component width will match the anchor width.

Popup Reference and Methods

To execute Popup methods, obtain a reference to the component instance with @ref.

Method	Description
Refresh	Re-renders the Popup. The Popup renders 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 ensures that the Popup content is up-to-date.
Show	Displays the Popup.
Hide	Closes the Popup.

<TelerikButton OnClick="@TogglePopup"
               Class="popup-target">Toggle Popup</TelerikButton>

<TelerikPopup @ref="@PopupRef"
              AnchorSelector=".popup-target">
    Telerik Popup for Blazor
</TelerikPopup>

@code {
    private TelerikPopup? PopupRef { get; set; }

    private bool PopupVisible { get; set; }

    private void TogglePopup()
    {
        if (!PopupVisible)
        {
            PopupVisible = true;
            PopupRef?.Show();
        }
        else
        {
            PopupVisible = false;
            PopupRef?.Hide();
        }
    }
}

Next Steps

• Explore the Popup Positioning and Collision Settings
• Customize the Popup Animations

See Also

• Live Popup Demos
• Popup API Reference
• Comparison between All Popup Components