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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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.
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.
@using Syncfusion.EJ2
<ejs-dialog id="dialog" header="Welcome" isModal= width=>
<e-content-template>
<p>This a basic dialog settings.</p>
</e-content-template>
</ejs-dialog>
<script>
window.onload = function () {
document.getElementById().onclick = function () {
document.getElementById().ej2_instances[].show();
};
};
</script>
"true"
"500px"
is
with
default
'openBtn'
'dialog'
0
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>
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:
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>
<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>
