Skip to main content Home Creators syncfusion vue-ui-components-skills syncfusion-vue-popups
syncfusion-vue-popups Comprehensive guide for implementing Syncfusion Vue popup components including Dialog, ToolTip. Use this when building modal/modeless dialogs, confirmation popups, forms in dialogs, draggable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in Vue applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
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.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-popupsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-vue-popups description Comprehensive guide for implementing Syncfusion Vue popup components including Dialog, ToolTip. Use this when building modal/modeless dialogs, confirmation popups, forms in dialogs, draggable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in Vue applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Layout"}
Syncfusion Vue Popups Component
Implementing Syncfusion Vue Dialog Component
The DialogComponent displays content in a floating window with support for modal and modeless modes, custom positioning, dragging, resizing, animations, templating, and comprehensive accessibility features.
Component Overview
DialogComponent Features:
Modal/Modeless modes : Control parent interaction blocking9 preset positions + custom X/Y : Flexible placementDragging : Header-based drag and drop (allowDragging)Resizing : Diagonal resize grip (enableResize)Templating : Custom header, content, footerAnimations : 16 effects (Fade, Zoom, Flip, Slide, FadeZoom, etc.)Buttons : Built-in action buttons with click handlersEvents : open, close, beforeOpen, beforeClose, drag, dragStart, dragStop, resize eventsKeyboard Navigation : Tab, Escape (closeOnEscape), EnterWCAG 2.2 Accessibility : ARIA roles, focus management
Localization
RTL Support : Right-to-left rendering
Documentation & Navigation Guide
Getting Started
Installation (@syncfusion/ej2-vue-popups)
CSS/theme imports (material, bootstrap, tailwind)
Basic DialogComponent template structure
Using refs (template refs) to control dialogs
Composition API patterns with reactive state
Initial visibility with visible prop
Modal vs Modeless
isModal boolean property (true/false)
Modal overlay behavior and parent blocking
Modeless floating behavior
Focus management differences
When to choose each mode
Side-by-side comparisons
Positioning and Dragging
position object (X: 'center'|'left'|'right'|number, Y: 'top'|'center'|'bottom'|number)
9 preset position combinations
Custom pixel-based positioning
allowDragging boolean property
enableResize and resizeHandles configuration
Target element constraints with target prop
Templates and Content
content property (string, HTML, template)
header property (text or template)
footerTemplate (custom footer template)
Dynamic content updates with computed
HTML sanitization (enableHtmlSanitizer)
Styling content and edge cases
Buttons and Actions
buttons array with ButtonPropsModel[]
ButtonPropsModel structure (buttonModel, click, isFlat, type)
buttonModel properties (content, isPrimary, cssClass)
Click event handlers with methods
Styling buttons with cssClass
Button types (Button, Submit, Reset)
Animation Effects
AnimationSettingsModel (effect, duration, delay)
16 animation effects (Fade, FadeZoom, FlipLeftDown, FlipLeftUp, etc.)
Duration in milliseconds
Delay before animation starts
Disable animations (effect: 'None')
Performance considerations
Localization and Accessibility
locale property for culture/language
WCAG 2.2 compliance
Keyboard navigation (Tab, Enter, Escape)
closeOnEscape behavior control
ARIA roles and attributes
Screen reader support
RTL support with enableRtl
Focus management patterns
Advanced Patterns
Events: open, close, beforeOpen, beforeClose, drag, dragStart, dragStop, resizeStart, resizeStop, resizing
Nested and stacked dialogs
Forms with validation
AJAX content loading
Prevent close logic (beforeClose event)
Full-screen dialogs
HTML sanitization and security
CSS classes and z-index management
Enable persistence (enablePersistence)
Common edge cases and troubleshooting
API Reference (Complete)
All 24 DialogModel properties with types and defaults
All 11 events with event arguments
Methods: show(), hide(), refresh(), destroy()
ButtonPropsModel structure (buttonModel, click, isFlat, type)
AnimationSettingsModel with all 16 effects
Types and enumerations
Quick reference patterns
Quick Start Example
⚠️ Dependency Alignment: All @syncfusion/ej2-* packages must be on the same major version to avoid peer-dependency conflicts and supply-chain mismatches. Install them together:
npm install @syncfusion/ej2-vue-popups @syncfusion/ej2-base @syncfusion/ej2-buttons
<template>
<div id="target">
<ejs-dialog
target='#target'
content="This is dialog content"
width="300px"
>
</ejs-dialog>
</div>
</template>
<script>
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
export default {
name: "App",
components: {
'ejs-dialog': DialogComponent
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/dialog/index.css";
#target {
height: 100%;
min-height: 200px;
}
</style>
Common Patterns
Pattern 1: Confirmation Dialog Delete action with confirmation buttons:
<script setup>
const buttons = [
{
buttonModel: { content: 'Delete', cssClass: 'e-flat e-danger', isPrimary: true },
click: () => { performDelete(); dialogRef.value?.hide?.(); }
},
{
buttonModel: { content: 'Cancel', cssClass: 'e-flat' },
click: () => dialogRef.value?.hide?.()
}
];
</script>
Pattern 2: Form Dialog Dialog with form inputs and validation:
<DialogComponent header="Edit Profile" :buttons="buttons" :isModal="true" width="500px">
<div style="padding: 16px">
<input type="text" placeholder="Name" class="form-control" />
<input type="email" placeholder="Email" class="form-control" />
<textarea placeholder="Bio" class="form-control"></textarea>
</div>
</DialogComponent>
Pattern 3: Centered Dialog Position dialog in center of screen:
<DialogComponent
header="Alert"
:position="{ X: 'center', Y: 'center' }"
:isModal="true"
showCloseIcon
width="350px"
>
This dialog is centered on the screen.
</DialogComponent>
Pattern 4: Draggable Floating Panel Non-modal, draggable properties panel:
<DialogComponent
header="Properties"
:isModal="false"
:allowDragging="true"
:position="{ X: 200, Y: 150 }"
width="300px"
:enableResize="true"
:resizeHandles="['All']"
showCloseIcon
>
Drag me around! I don't block the page.
</DialogComponent>
Pattern 5: Animated Dialog Dialog with Zoom animation:
<DialogComponent
header="Welcome"
:animationSettings="{ effect: 'Zoom', duration: 400, delay: 0 }"
:isModal="true"
:position="{ X: 'center', Y: 'center' }"
width="400px"
>
This dialog zooms in smoothly!
</DialogComponent>
Pattern 6: Custom Footer Template Custom footer instead of buttons:
<DialogComponent
header="Custom Footer"
:isModal="true"
>
<template #footer>
<div style="padding: 12px; text-align: right">
<button class="e-control e-btn e-primary" style="margin-right: 8px">
Save
</button>
<button class="e-control e-btn">Cancel</button>
</div>
</template>
Dialog content with custom footer.
</DialogComponent>
Pattern 7: Nested Dialogs Parent dialog containing child dialog:
<DialogComponent header="Parent" :isModal="true" width="400px">
<button @click="showChild" class="e-control e-btn">
Open Child Dialog
</button>
<DialogComponent
ref="childDialogRef"
header="Child"
:isModal="true"
width="300px"
:visible="false"
>
Nested dialog content
</DialogComponent>
</DialogComponent>
Key Props (DialogModel) Prop Type Description Default When to Use isModalboolean Enable modal mode (blocks parent interaction) false Confirmations, alerts, critical actions visibleboolean Initial visibility state false Control initial dialog display headerstring Dialog header/title - Every dialog needs a title contentstring | HTML Dialog body content - Main dialog information buttonsButtonPropsModel[] Action buttons in footer - For OK/Cancel, action confirmations footerTemplateTemplate Custom footer content - When buttons prop doesn't fit showCloseIconboolean Show close button in header false Allow users to dismiss positionPositionData X/Y positioning (center, top, etc.) { X: 'center', Y: 'center' } Custom placement allowDraggingboolean Enable drag functionality false Movable dialogs, floating panels enableResizeboolean Enable resize with grip false Resizable dialogs resizeHandlesResizeDirections[] Which edges/corners resize ['All'] Control resize behavior widthstring | number Dialog width '330px' Control dialog size heightstring | number Dialog height 'auto' Control dialog size minHeightstring | number Minimum height - Prevent too-small resize animationSettingsAnimationSettingsModel Animation effect/duration/delay - Smooth open/close transitions closeOnEscapeboolean Close on Escape key press true Keyboard navigation targetstring (selector) Container element document.body Modal positioning enableHtmlSanitizerboolean Sanitize HTML content true Security (prevent XSS) cssClassstring Custom CSS classes - Styling and theming enableRtlboolean Right-to-left rendering false RTL languages localestring Culture/language code 'en-US' Localization zIndexnumber Stack order - Manage overlapping dialogs enablePersistenceboolean Persist state on reload false Remember size/position
Common Use Cases
Confirmation Dialogs - Confirm delete, submit, or critical actions before proceedingAlert/Info Popups - Display system messages, warnings, or notificationsForm Dialogs - Edit profiles, settings, or create new records in modal formsInput Prompts - Collect user input for specific actions (e.g., "Enter file name")Properties Panels - Draggable, non-modal panels for settings or propertiesMulti-Step Workflows - Nested dialogs for step-by-step processesLoading/Processing - Show progress indicators or loading statesHelp/Documentation - Contextual help, tips, or tutorial overlaysImage Galleries - Lightbox dialogs for images or media previewsSettings/Preferences - Organize application settings in tabbed dialogs
Next: Choose a reference based on what you need to implement. All references include working code examples, best practices, and troubleshooting guidance.
Implementing Syncfusion Vue Predefined Dialog Component
Table of Contents
Key Concept Syncfusion Predefined Dialogs in Vue are opened
imperatively via the DialogUtility
Dialog Type Method Alert DialogUtility.alert({ ... })Confirm DialogUtility.confirm({ ... })Prompt (input) DialogUtility.confirm({ content: '<input .../>', ... })
Import: import { DialogUtility } from '@syncfusion/ej2-vue-popups';
Quick Start <template>
<div id="app">
<button class="e-btn" @click="showAlert">Show Alert</button>
</div>
</template>
<script>
import { DialogUtility } from '@syncfusion/ej2-vue-popups';
export default {
name: "App",
methods: {
showAlert: function() {
DialogUtility.alert({
title: 'Low Battery',
width: '250px',
content: '10% of battery remaining'
});
}
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/dialog/index.css";
</style>
Documentation Guide
Getting Started
Installation (@syncfusion/ej2-vue-popups)
CSS imports
Alert, Confirm, and Prompt minimal examples
Setup with app.mount()
Animation
animationSettings property with effect, duration, delayAlert / Confirm / Prompt animation examples
Draggable
isDraggable boolean propertyAlert / Confirm / Prompt drag examples
Position
position property: { X, Y } — left|center|right / top|center|bottom or numeric offsetAlert / Confirm / Prompt position examples
Dimension
width and height propertiescssClass for max-width / min-width constraintsAlert / Confirm / Prompt dimension examples
Customization
okButton / cancelButton — custom text, icon, click handlershowCloseIcon and closeOnEscapeCustom content for prompt dialogs
API Reference
Full DialogUtility.alert() / confirm() option properties
All supported fields: title, content, width, height, position, animationSettings, isDraggable, okButton, cancelButton, showCloseIcon, closeOnEscape, cssClass
Common Patterns <script setup>
const dialogObj = DialogUtility.alert({
title: 'Info',
content: 'Operation complete.',
okButton: { click: () => { dialogObj.hide(); } }
});
</script>
<script setup>
const dialogObj = DialogUtility.confirm({
title: 'Delete?',
content: 'Are you sure?',
width: '300px',
okButton: { text: 'Yes', click: () => { dialogObj.hide(); /* do delete */ } },
cancelButton: { text: 'No', click: () => { dialogObj.hide(); } }
});
</script>
<script setup>
const dialogObj = 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: () => {
const val = (document.getElementById('nameInput') as HTMLInputElement).value;
dialogObj.hide();
}
},
cancelButton: { click: () => dialogObj.hide() }
});
</script>
Implementing Syncfusion Vue Tooltip A comprehensive skill for implementing the Syncfusion Vue TooltipComponent — covering setup, content strategies, positioning, open modes, animation, customization, accessibility, and advanced how-to patterns.
Package: @syncfusion/ej2-vue-popupsImport: import { TooltipComponent } from '@syncfusion/ej2-vue-popups';
Quick Start npm install @syncfusion/ej2-vue-popups --save
npm install @syncfusion/ej2-material3-theme --save
<template>
<div id="app">
<div id="container">
<ejs-tooltip content="Tooltip content" target="#target">
<button id="target">Show Tooltip</button>
</ejs-tooltip>
</div>
</div>
</template>
<script>
import { TooltipComponent } from "@syncfusion/ej2-vue-popups";
export default {
name: "App",
components: {
"ejs-tooltip": TooltipComponent
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/tooltip/index.css";
</style>
Navigation Guide
Getting Started & Setup
Installation and CSS imports
Basic tooltip on a single element
Tooltip on multiple targets within a container (target prop)
Using title attribute as fallback content
Running the application
Content
Plain string content
Template content (slot)
Dynamic content loaded via Fetch/Ajax (beforeRender event)
HTML content (iframe, embedded elements)
Updating content programmatically with ref
Positioning
12 static positions (TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, LeftTop, LeftCenter, LeftBottom, RightTop, RightCenter, RightBottom)
Tip pointer show/hide (showTipPointer) and positioning (tipPointerPosition: Auto, Start, Middle, End)
Dynamic positioning with refresh() method (draggable targets)
Mouse trailing (mouseTrail)
Offset values (offsetX, offsetY)
Collision handling (auto-flip behavior, windowCollision)
Open Modes
Auto, Hover, Click, Focus, Custom modes via opensOnCombining multiple modes (opensOn="Hover Click")
Sticky mode (isSticky) — close button appears
Open/close delay (openDelay, closeDelay)
Custom open mode with open() and close() methods
Mobile behavior (tap-and-hold)
Animation
animation property (open/close AnimationModel)All 15 available animation effects (FadeIn, ZoomIn, FlipX/Y, etc.)
Custom duration and delay
Animating via open() and close() methods programmatically
Transition effect using beforeRender + CSS transitions
Customization
cssClass for custom themes and stylesTip pointer size, background, and border customization
Full tooltip appearance (background, opacity, font)
Curved tip and bubble tip arrow patterns
Dimension control (width, height) and scroll mode
RTL support (enableRtl)
How-To Patterns
Tooltip on multiple targets (dynamic content per target)
Tooltip on disabled elements
Enabling/disabling tooltip with destroy() and render()
Displaying tooltip on SVG and Canvas elements
Embedding iframes or HTML elements in tooltip content
Custom open modes (double-click, right-click)
Accessibility
WCAG 2.2 and Section 508 compliance
WAI-ARIA attributes (role="tooltip", aria-describedby, aria-hidden)
Keyboard shortcuts (Escape, Tab)
Screen reader behavior
API Reference
All properties, methods, and events with types and defaults
TooltipAnimationSettings, TooltipEventArgs typesPosition and TipPointerPosition enum values
Common Patterns
Tooltip on a Button <TooltipComponent content="Submit the form" position="TopCenter">
<button class="e-btn e-primary">Submit</button>
</TooltipComponent>
Multi-Target Tooltip in a Container <!-- Single TooltipComponent handles all .e-info targets;
each uses its own `title` attribute as content -->
<TooltipComponent target=".e-info" position="RightCenter">
<form>
<input class="e-info" type="text" title="Enter your name" />
<input class="e-info" type="email" title="Enter a valid email" />
</form>
</TooltipComponent>
Click-Triggered Sticky Tooltip <TooltipComponent
content="Click the × to close me"
opensOn="Click"
:isSticky="true"
position="BottomCenter"
>
<button class="e-btn">Click Me</button>
</TooltipComponent>
Programmatic Open/Close <template>
<TooltipComponent
ref="tooltipRef"
content="Tooltip opened programmatically"
opensOn="Custom"
>
<button
ref="target"
class="e-btn"
@click="toggleTooltip"
>
Toggle Tooltip
</button>
</TooltipComponent>
</template>
<script setup>
import { ref } from 'vue';
import { TooltipComponent } from '@syncfusion/ej2-vue-popups';
const tooltipRef = ref(null);
const target = ref(null);
const toggleTooltip = () => {
if (target.value?.getAttribute('data-tooltip-id')) {
tooltipRef.value?.close?.();
} else {
tooltipRef.value?.open?.(target.value);
}
};
</script>
Mouse-Trailing Tooltip <TooltipComponent
content="Following your mouse!"
:mouseTrail="true"
:showTipPointer="false"
>
<div style="width: 200px; height: 100px; background: #eee">
Hover over me
</div>
</TooltipComponent>
Key Props at a Glance Prop Type Default Purpose contentstring | HTMLElement | Function— Tooltip text, HTML, or template targetstring— CSS selector for multi-target mode positionPosition'TopCenter'12 placement values opensOnstring'Auto'Hover / Click / Focus / Custom isStickybooleanfalseKeep visible until user closes mouseTrailbooleanfalseFollow mouse cursor showTipPointerbooleantrueShow/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 animationAnimationModelFadeIn/FadeOut 150ms Open/close animation enableRtlbooleanfalseRight-to-left rendering enableHtmlSanitizerbooleantrueSanitize HTML content containerstring | HTMLElementbodyPopup append target windowCollisionbooleanfalseCollision vs viewport
More from this repository Comprehensive guide for implementing Syncfusion Vue 3 button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a Vue application.
Comprehensive guide for implementing Syncfusion Vue Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and reactive data patterns in Vue 3 applications using Composition API.
syncfusion-vue-data-manager Implements Syncfusion Vue DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Related occupations SOC
Based on SOC occupation classification
