# Syncfusion Aspnetcore Popups > Comprehensive guide for implementing Syncfusion ASP.NET Core Popup components including Dialog, Predefined Dialog, and Tooltip. Covers modal dialogs, positioning, animations, templates, accessibility, event handling, and various dialog and tooltip interaction patterns. - Skill: `syncfusion/syncfusion-aspnetcore-popups` (Agent Skill, multi-file: 25 files) - Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-aspnetcore-popups` - Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-aspnetcore-popups/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: syncfusion (https://skillmd.com/u/syncfusion) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/syncfusion/syncfusion-aspnetcore-popups --- # Syncfusion ASP.NET Core Popups ## Dialog This skill documents how to implement, configure, and customize the Syncfusion Dialog in ASP.NET Core applications using the `` Tag Helper API. It covers setup, modality, positioning, animations, templates, events, accessibility, and styling. ### Quick Links - [API Reference](references/dialog-api.md) - [Getting Started](references/dialog-getting-started.md) - [Basic Features](references/dialog-basic-features.md) - [Positioning & Sizing](references/dialog-positioning-and-sizing.md) - [Animations & Transitions](references/dialog-animations-and-transitions.md) - [Templates](references/dialog-templates.md) - [Accessibility & Localization](references/dialog-accessibility-and-localization.md) - [Events & Interactions](references/dialog-events-and-interactions.md) - [Styling & Themes](references/dialog-styling-and-themes.md) ### Quick Start (Tag Helper) In your Razor view: ```csharp @using Syncfusion.EJ2

This is a basic dialog with default settings.

``` Ensure you include the script manager and styles in your layout (`_Layout.cshtml`): ```csharp ``` ### Common Patterns #### Modal Confirmation Dialog ```csharp

Are you sure you want to proceed?

``` #### Draggable Dialog with Header ```csharp

Grab the header to drag this dialog.

``` #### Centered Dialog ```csharp

This dialog is centered on the page.

``` ### Key Properties | Tag Helper Attribute | Type | Purpose | Example | |----------------------|------|---------|---------| | `header` | string | Dialog title bar text | `header="Confirm Delete"` | | `isModal` | bool | Shows overlay behind dialog | `isModal="true"` | | `width` | string | Dialog width (px, %) | `width="500px"` | | `height` | string | Dialog height (px, %) | `height="300px"` | | `minHeight` | string | Minimum dialog height | `minHeight="150px"` | | `allowDragging` | bool | Enable drag to reposition | `allowDragging="true"` | | `enableResize` | bool | Enable end-user resizing | `enableResize="true"` | | `showCloseIcon` | bool | Display close (X) button | `showCloseIcon="true"` | | `closeOnEscape` | bool | Close on Escape key | `closeOnEscape="true"` | | `visible` | bool | Initial visibility | `visible="false"` | | `target` | string | Target container selector | `target="#container"` | | `cssClass` | string | Custom CSS class(es) | `cssClass="my-dialog"` | | `enableRtl` | bool | Right-to-left rendering | `enableRtl="true"` | | `enablePersistence` | bool | Persist state on reload | `enablePersistence="true"` | | `zIndex` | double | Z-order stacking level | `zIndex="2000"` | | `` | DialogPositionData | X/Y positioning | `x="center" y="center"` | | `` | DialogAnimationSettings | Open/close animation | `effect="Zoom" duration="400"` | | `footerTemplate` | string | Custom footer HTML string | `footerTemplate="..."` | > **Removed invalid APIs:** `is-hidden` (use `visible="false"`), `position-x`/`position-y` flat attributes (use ``), `allow-resizing` (use `enable-resize`), `max-height`, `max-width`, `min-width` (not supported). ### Next Steps Read `getting-started.md` for full installation steps, NuGet package setup, and configuration details. ## Predefined Dialog Predefined dialogs are opened imperatively using the **`DialogUtility`** JavaScript utility class. They provide ready-to-use alert, confirm, and prompt dialogs without component setup. Use predefined dialogs for quick notifications and user confirmations. ### Key Concept Predefined dialogs are **not** Tag Helper components. They are invoked via JavaScript: ```javascript ej.popups.DialogUtility.alert({ ... }); ej.popups.DialogUtility.confirm({ ... }); ``` --- ### Quick Start ```csharp ``` --- ### Documentation Guide #### Getting Started 📄 **Read:** [references/predefineddialog-getting-started.md](references/predefineddialog-getting-started.md) - Installation and setup - Alert, Confirm, and Prompt basic examples - JavaScript invocation patterns #### Position 📄 **Read:** [references/predefineddialog-position.md](references/predefineddialog-position.md) - `position` property with X/Y values - Center, top, bottom, left, right positioning - Custom pixel offsets #### Animation 📄 **Read:** [references/predefineddialog-animation.md](references/predefineddialog-animation.md) - `animationSettings` with effect, duration, delay - Alert, Confirm, Prompt animation examples #### Draggable 📄 **Read:** [references/predefineddialog-draggable.md](references/predefineddialog-draggable.md) - `isDraggable` boolean property - Dialog drag-to-reposition examples #### Dimension 📄 **Read:** [references/predefineddialog-dimension.md](references/predefineddialog-dimension.md) - `width` and `height` properties - `cssClass` for size constraints (min-width, max-width) #### Customization 📄 **Read:** [references/predefineddialog-customization.md](references/predefineddialog-customization.md) - `okButton` / `cancelButton` customization - `showCloseIcon` and `closeOnEscape` - Custom content with HTML strings #### API Reference 📄 **Read:** [references/predefineddialog-api.md](references/predefineddialog-api.md) - Full `DialogUtility.alert()` / `confirm()` option properties - All supported fields and types --- ### Common Patterns **Alert Dialog:** ```javascript ej.popups.DialogUtility.alert({ title: 'Info', content: 'Operation complete.', width: '250px' }); ``` **Confirm Dialog:** ```javascript var dialogObj = ej.popups.DialogUtility.confirm({ title: 'Delete?', content: 'Are you sure?', width: '300px', okButton: { text: 'Yes', click: function() { /* delete */ dialogObj.hide(); } }, cancelButton: { text: 'No', click: function() { dialogObj.hide(); } } }); ``` **Prompt Dialog:** ```javascript var dialogObj = ej.popups.DialogUtility.confirm({ title: 'Enter Name', content: '

Your name:

', width: '300px', okButton: { text: 'Submit', click: function() { var val = document.getElementById('nameInput').value; dialogObj.hide(); } }, cancelButton: { click: function() { dialogObj.hide(); } } }); ``` --- ## Tooltip A tooltip component that displays helpful information or hints when users hover over, click, or focus on an element. The `` Tag Helper provides flexible positioning, animations, multiple trigger modes, and accessibility features. **Package:** `Syncfusion.EJ2.AspNet.Core` **Tag Helper:** `` ### Quick Start ```csharp ``` --- ### Documentation Guide #### Getting Started & Setup 📄 **Read:** [references/tooltip-getting-started.md](references/tooltip-getting-started.md) - Installation and CSS imports - Basic tooltip on a single element - Multi-target tooltips with title attributes - Running the application #### Content 📄 **Read:** [references/tooltip-content.md](references/tooltip-content.md) - String content and HTML markup - Template content via `` - Dynamic content via `beforeRender` event - HTML sanitization for security #### Positioning 📄 **Read:** [references/tooltip-positioning.md](references/tooltip-positioning.md) - 12 static positions (TopLeft, TopCenter, TopRight, BottomLeft, etc.) - Tip pointer positioning (Start, Middle, End) - Dynamic positioning with `refresh()` method - Offset values (`offsetX`, `offsetY`) - Collision handling (`windowCollision`) #### Open Modes 📄 **Read:** [references/tooltip-open-mode.md](references/tooltip-open-mode.md) - `Auto`, `Hover`, `Click`, `Focus`, `Custom` modes via `opensOn` - Combining multiple modes (e.g., `opensOn="Hover Click"`) - Sticky mode (`isSticky`) with close button - Open/close delays (`openDelay`, `closeDelay`) #### Animation 📄 **Read:** [references/tooltip-animation.md](references/tooltip-animation.md) - `` with open/close effects - 7+ animation effects (FadeIn, ZoomIn, SlideUp, etc.) - Duration and delay configuration - Disable animations with effect: 'None' #### Customization 📄 **Read:** [references/tooltip-customization.md](references/tooltip-customization.md) - `cssClass` for custom styling - Tip pointer visibility and customization - Dimensions (`width`, `height`) - RTL support (`enableRtl`) - Mouse trailing (`mouseTrail`) #### Accessibility 📄 **Read:** [references/tooltip-accessibility.md](references/tooltip-accessibility.md) - WCAG 2.2 and Section 508 compliance - ARIA attributes (role, aria-describedby, aria-hidden) - Keyboard navigation (Tab, Escape) - Screen reader support and focus management - Best practices for accessible tooltips #### API Reference 📄 **Read:** [references/tooltip-api.md](references/tooltip-api.md) - All properties with types and defaults - Methods: `open()`, `close()`, `refresh()`, `destroy()`, `dataBind()` - Events: `BeforeRender`, `AfterOpen`, `AfterClose`, `Created`, `Destroyed` - Position and TipPointerPosition enum values --- ### Common Patterns **Basic Tooltip on Button:** ```csharp ``` **Multi-Target Tooltip:** ```csharp ``` **Click-Triggered Sticky Tooltip:** ```csharp

``` **Programmatic Open/Close:** ```csharp ``` --- ### Key Properties at a Glance | Tag Helper Attr | Type | Default | Purpose | |-----------------|------|---------|---------| | `content` | `string` | — | Tooltip text or HTML | | `target` | `string` | — | CSS selector for multi-target mode | | `position` | `Position` | `'TopCenter'` | 12 placement values | | `opensOn` | `string` | `'Auto'` | Hover / Click / Focus / Custom | | `isSticky` | `bool` | `false` | Keep visible until user closes | | `mouseTrail` | `bool` | `false` | Follow mouse cursor | | `showTipPointer` | `bool` | `true` | Show/hide arrow tip | | `tipPointerPosition` | `TipPointerPosition` | `'Auto'` | Auto / Start / Middle / End | | `openDelay` | `number` | `0` | ms delay before opening | | `closeDelay` | `number` | `0` | ms delay before closing | | `offsetX` / `offsetY` | `number` | `0` | Distance from target (px) | | `width` / `height` | `string \| number` | `'auto'` | Tooltip dimensions | | `cssClass` | `string` | `null` | Custom CSS class | | `enableRtl` | `bool` | `false` | Right-to-left rendering | | `enableHtmlSanitizer` | `bool` | `true` | Sanitize HTML content | | `windowCollision` | `bool` | `false` | Collision vs viewport |