MCPInstall

syncfusion-aspnetcore-popups

by syncfusionFrontend & Design

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.

Installs
100
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-popups
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-aspnetcore-popups automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 <ejs-dialog> Tag Helper API. It covers setup, modality, positioning, animations, templates, events, accessibility, and styling.

Quick Links

  • API Reference
  • Getting Started
  • Basic Features
  • Positioning & Sizing
  • Animations & Transitions
  • Templates
  • Accessibility & Localization
  • Events & Interactions
  • Styling & Themes

Quick Start (Tag Helper)

In your Razor view:

@using Syncfusion.EJ2

<ejs-dialog id="dialog" header="Welcome" isModal="true" width="500px">
    <e-content-template>
        <p>This is a basic dialog with default settings.</p>
    </e-content-template>
</ejs-dialog>

<script>
    window.onload = function () {
        document.getElementById('openBtn').onclick = function () {
            document.getElementById('dialog').ej2_instances[0].show();
        };
    };
</script>

Ensure you include the script manager and styles in your layout (_Layout.cshtml):

<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />

<!-- At end of <body> -->
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
<ejs-scripts></ejs-scripts>

Common Patterns

Modal Confirmation Dialog

<ejs-dialog id="confirmDialog" header="Confirm Action" isModal="true" width="400px">
    <e-dialog-buttons>
        <e-dialog-dialogbutton content="Yes" isPrimary="true" click="confirmAction"></e-dialog-dialogbutton>
        <e-dialog-dialogbutton content="No" click="closeDialog"></e-dialog-dialogbutton>
    </e-dialog-buttons>
    <e-content-template>
        <p>Are you sure you want to proceed?</p>
    </e-content-template>
</ejs-dialog>

Draggable Dialog with Header

<ejs-dialog id="draggableDialog" 
    header="Drag Me" 
    allowDragging="true" 
    width="500px" 
    showCloseIcon="true">
    <e-content-template>
        <p>Grab the header to drag this dialog.</p>
    </e-content-template>
</ejs-dialog>

Centered Dialog

<ejs-dialog id="centeredDialog" 
    header="Centered Position" 
    width="500px">
    <e-dialog-position x="center" y="center"></e-dialog-position>
    <e-content-template>
        <p>This dialog is centered on the page.</p>
    </e-content-template>
</ejs-dialog>

Key Properties

Tag Helper AttributeTypePurposeExample
headerstringDialog title bar textheader="Confirm Delete"
isModalboolShows overlay behind dialogisModal="true"
widthstringDialog width (px, %)width="500px"
heightstringDialog height (px, %)height="300px"
minHeightstringMinimum dialog heightminHeight="150px"
allowDraggingboolEnable drag to repositionallowDragging="true"
enableResizeboolEnable end-user resizingenableResize="true"
showCloseIconboolDisplay close (X) buttonshowCloseIcon="true"
closeOnEscapeboolClose on Escape keycloseOnEscape="true"
visibleboolInitial visibilityvisible="false"
targetstringTarget container selectortarget="#container"
cssClassstringCustom CSS class(es)cssClass="my-dialog"
enableRtlboolRight-to-left renderingenableRtl="true"
enablePersistenceboolPersist state on reloadenablePersistence="true"
zIndexdoubleZ-order stacking levelzIndex="2000"
<e-dialog-position>DialogPositionDataX/Y positioningx="center" y="center"
<e-dialog-animationsettings>DialogAnimationSettingsOpen/close animationeffect="Zoom" duration="400"
footerTemplatestringCustom footer HTML stringfooterTemplate="<span>...</span>"

Removed invalid APIs: is-hidden (use visible="false"), position-x/position-y flat attributes (use <e-dialog-position>), 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:

ej.popups.DialogUtility.alert({ ... });
ej.popups.DialogUtility.confirm({ ... });

Quick Start

<button class="e-btn e-danger" onclick="showAlert()">Alert</button>

<script>
    function showAlert() {
        ej.popups.DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }
</script>

Documentation Guide

Getting Started

📄 Read: references/predefineddialog-getting-started.md

  • Installation and setup
  • Alert, Confirm, and Prompt basic examples
  • JavaScript invocation patterns

Position

📄 Read: 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

  • animationSettings with effect, duration, delay
  • Alert, Confirm, Prompt animation examples

Draggable

📄 Read: references/predefineddialog-draggable.md

  • isDraggable boolean property
  • Dialog drag-to-reposition examples

Dimension

📄 Read: references/predefineddialog-dimension.md

  • width and height properties
  • cssClass for size constraints (min-width, max-width)

Customization

📄 Read: references/predefineddialog-customization.md

  • okButton / cancelButton customization
  • showCloseIcon and closeOnEscape
  • Custom content with HTML strings

API Reference

📄 Read: references/predefineddialog-api.md

  • Full DialogUtility.alert() / confirm() option properties
  • All supported fields and types

Common Patterns

Alert Dialog:

ej.popups.DialogUtility.alert({
    title: 'Info',
    content: 'Operation complete.',
    width: '250px'
});

Confirm Dialog:

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:

var dialogObj = ej.popups.DialogUtility.confirm({
    title: 'Enter Name',
    content: '<p>Your name:</p><input id="nameInput" class="e-input" placeholder="Type here..." />',
    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 <ejs-tooltip> Tag Helper provides flexible positioning, animations, multiple trigger modes, and accessibility features.

Package: Syncfusion.EJ2.AspNet.Core
Tag Helper: <ejs-tooltip>

Quick Start

<ejs-tooltip id="tooltip" target="#target" position="TopCenter" content="Tooltip Content">
    <e-content-template>
        <button class="e-btn" id="target">Show Tooltip</button>
    </e-content-template>
</ejs-tooltip>

Documentation Guide

Getting Started & Setup

📄 Read: 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

  • String content and HTML markup
  • Template content via <e-content-template>
  • Dynamic content via beforeRender event
  • HTML sanitization for security

Positioning

📄 Read: 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

  • 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

  • <e-tooltip-animationsettings> 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

  • cssClass for custom styling
  • Tip pointer visibility and customization
  • Dimensions (width, height)
  • RTL support (enableRtl)
  • Mouse trailing (mouseTrail)

Accessibility

📄 Read: 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

  • 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:

<ejs-tooltip id="tooltip" target="#target" position="TopCenter" content="Submit the form">
    <e-content-template>
        <button class="e-btn" id="target">Submit</button>
    </e-content-template>
</ejs-tooltip>

Multi-Target Tooltip:

<ejs-tooltip id="tooltip" target=".info-icon" position="TopCenter">
    <e-content-template>
        <button class="e-btn info-icon" title="Information">Info 1</button>
        <button class="e-btn info-icon" title="Details">Info 2</button>
        <button class="e-btn info-icon" title="Help">Info 3</button>
    </e-content-template>
</ejs-tooltip>

Click-Triggered Sticky Tooltip:

<ejs-tooltip target="#target" content="Click the × to close me" 
    opensOn="Click" 
    isSticky="true" 
    position="BottomCenter">
    <e-content-template>
        <button id="target" class="e-btn">Click Me</button>
    </e-content-template>
</ejs-tooltip>

Programmatic Open/Close:

<ejs-tooltip id="tooltip" target="#target" content="Tooltip opened programmatically" opensOn="Custom">
    <e-content-template>
        <button id="target" class="e-btn" onclick="toggleTooltip()">Toggle Tooltip</button>
    </e-content-template>
</ejs-tooltip>

<script>
    function toggleTooltip() {
        var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
        var btn = document.querySelector('.e-btn');
        
        if (btn.getAttribute('data-tooltip-open') === 'true') {
            tooltipObj.close();
            btn.setAttribute('data-tooltip-open', 'false');
        } else {
            tooltipObj.open(btn);
            btn.setAttribute('data-tooltip-open', 'true');
        }
    }
</script>

Key Properties at a Glance

Tag Helper AttrTypeDefaultPurpose
contentstring—Tooltip text or HTML
targetstring—CSS selector for multi-target mode
positionPosition'TopCenter'12 placement values
opensOnstring'Auto'Hover / Click / Focus / Custom
isStickyboolfalseKeep visible until user closes
mouseTrailboolfalseFollow mouse cursor
showTipPointerbooltrueShow/hide arrow tip
tipPointerPositionTipPointerPosition'Auto'Auto / Start / Middle / End
openDelaynumber0ms delay before opening
closeDelaynumber0ms delay before closing
offsetX / offsetYnumber0Distance from target (px)
width / heightstring | number'auto'Tooltip dimensions
cssClassstringnullCustom CSS class
enableRtlboolfalseRight-to-left rendering
enableHtmlSanitizerbooltrueSanitize HTML content
windowCollisionboolfalseCollision vs viewport

FAQ

What does the syncfusion-aspnetcore-popups skill do?

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.

How do I install syncfusion-aspnetcore-popups?

Run npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-popups in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-aspnetcore-popups/ (personal) or .claude/skills/syncfusion-aspnetcore-popups/ (project).

Which AI agents can use syncfusion-aspnetcore-popups?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-aspnetcore-popups safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-aspnetcore-popups?

It is published by syncfusion in syncfusion/aspnetcore-ui-components-skills. It has 100 recorded installs.

More from syncfusion/aspnetcore-ui-components-skills

View all →

syncfusion-aspnetcore-charts

syncfusion/aspnetcore-ui-components-skills

Implements Syncfusion ASP.NET Core Chart (SfChart) for data visualization. Use this when building charts, visualizing time-series or categorical data, or creating dashboards. Covers series configuration (line, bar, pie), axes, tooltips, legends, and customization for ASP.NET Core applications.

Frontend & Design112 installs

syncfusion-aspnetcore-license

syncfusion/aspnetcore-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design111 installs

syncfusion-aspnetcore-common

syncfusion/aspnetcore-ui-components-skills

CONFIGURATION GUIDE — Assist with Syncfusion ASP.NET Core EJ2 components setup, localization, and version compatibility. Use when: installing Syncfusion packages, configuring globalization/localization, selecting compatible versions.

Frontend & Design111 installs

syncfusion-aspnetcore-grid

syncfusion/aspnetcore-ui-components-skills

Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.

Frontend & Design110 installs

syncfusion-aspnetcore-security

syncfusion/aspnetcore-ui-components-skills

Open the skill to read its SKILL.md instructions.

Security108 installs

syncfusion-aspnetcore-gantt-chart

syncfusion/aspnetcore-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design108 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs