Differences Between Telerik Popup Components
Environment
| Product |
UI for Blazor, AnimationContainer for Blazor, Dialog for Blazor, Popover for Blazor, Popup for Blazor, Tooltip for Blazor, Window for Blazor |
Description
This KB article answers the following questions:
- What are the differences between the Dialog and the Window component? Dialog vs Window comparison.
- What are the differences between the Popover and the Tooltip? Popover vs Tooltip comparison.
- When should you use one popup component over another?
Solution
Here are the unique features and distinguishing characteristics of all Telerik UI for Blazor popup components:
- The AnimationContainer is a blank animated element that renders at the same place where it is declared. The rendering location can matter a lot in some cases, for example, in scenarios with scrollable conatiners.
- The Dialog and Window are very similar. Basically, the Dialog is a modal Window that cannot be resized or dragged. The Dialog has built-in layouts for action buttons in its footer.
- The Popover and Tooltip are also similar. The Popover is designed to work with a single anchor (target), while the Tooltip works with multiple targets. Both components can show a callout. Similar to the Dialog, the Popover supports action buttons in its footer.
- The Popup UX can be similar to a Window or a drop down, depending on its animation and position settings. Similar to the Popover, the Popup also works with a single anchor and is positioned relative to it. The Popup has the most comprehensive set of parameters that position and align it to its anchor. Use the Popup to implement custom drop down components, which do not exist in the product.
The following table provides another point of view for easier comparison.
Component Comparison
| Component | Rendering Location * | Position Relative To | Anchor Elements | Built-in Styled Content | Modality | Resizing and Dragging |
|---|---|---|---|---|---|---|
| AnimationContainer | in-place | depends on positioned containers and Top and Left
|
0, but can be simulated | none | no | no |
| Dialog | root | page | 0 | header with optional close button, footer with action buttons | yes | no |
| Popover | root | anchor element | 1, limited support for multiple | header, footer with action buttons, callout | no | no |
| Popup | root | anchor element | 1 | none | no | no |
| Tooltip | root | anchor element | unlimited | icons, callout | no | no |
| Window | depends on ContainmentSelector
|
page | 0 | header with actions | depends on Modal
|
yes |
* Root rendering location means as a direct child of the TelerikRootComponent. In-place is how Blazor components normally work.