syncfusion-react-popups

Comprehensive guide for implementing Syncfusion React 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 React applications.

Jump to install

Repository: syncfusion/react-ui-components-skills
Last source activity: August 11, 2026 at 05:19
Detected SKILL.md language: English
Stars: 3
Forks: 8

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Back to search Back to installation

⚠️ 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-react-popups @syncfusion/ej2-base @syncfusion/ej2-buttons @syncfusion/ej2-popups

import React, { useRef, useState } from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
import '@syncfusion/ej2-popups/styles/material.css';

export default function App() {
  const dialogRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    dialogRef.current?.show();
    setIsOpen(true);
  };

  const handleClose = () => {
    dialogRef.current?.hide();
    setIsOpen(false);
  };

  const buttons = [
    {
      buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
      },
      click: handleClose,
    },
    {
      buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat',
      },
      click: handleClose,
    },
  ];

  return (
    <div id="dialog-target" style={{ position: 'relative', width: '100%', minHeight: '400px' }}>
      <button onClick={handleOpen} className="e-control e-btn e-primary">
        Open Dialog
      </button>

      <DialogComponent
        ref={dialogRef}
        header="Confirm Action"
        buttons={buttons}
        showCloseIcon={true}
        target="#dialog-target"
        width="400px"
        isModal={true}
        visible={false}
      >
        <p>Are you sure you want to proceed with this action?</p>
      </DialogComponent>
    </div>
  );
}

const buttons = [
  {
    buttonModel: { content: 'Delete', cssClass: 'e-flat e-danger', isPrimary: true },
    click: () => { performDelete(); dialogRef.current?.hide(); }
  },
  {
    buttonModel: { content: 'Cancel', cssClass: 'e-flat' },
    click: () => dialogRef.current?.hide()
  }
];

<DialogComponent header="Edit Profile" buttons={buttons} isModal={true} width="500px">
  <div style={{ padding: '16px' }}>
    <input type="text" placeholder="Name" className="form-control" />
    <input type="email" placeholder="Email" className="form-control" />
    <textarea placeholder="Bio" className="form-control"></textarea>
  </div>
</DialogComponent>

<DialogComponent
  header="Alert"
  position={{ X: 'center', Y: 'center' }}
  isModal={true}
  showCloseIcon={true}
  width="350px"
>
  This dialog is centered on the screen.
</DialogComponent>

<DialogComponent
  header="Properties"
  isModal={false}
  allowDragging={true}
  position={{ X: 200, Y: 150 }}
  width="300px"
  enableResize={true}
  resizeHandles={['All']}
  showCloseIcon={true}
>
  Drag me around! I don't block the page.
</DialogComponent>

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

<DialogComponent
  header="Custom Footer"
  isModal={true}
  footerTemplate={
    <div style={{ padding: '12px', textAlign: 'right' }}>
      <button className="e-control e-btn e-primary" style={{ marginRight: '8px' }}>
        Save
      </button>
      <button className="e-control e-btn">Cancel</button>
    </div>
  }
>
  Dialog content with custom footer.
</DialogComponent>

const childDialogRef = useRef(null);

<DialogComponent header="Parent" isModal={true} width="400px">
  <button onClick={() => childDialogRef.current?.show()} className="e-control e-btn">
    Open Child Dialog
  </button>
  
  <DialogComponent
    ref={childDialogRef}
    header="Child"
    isModal={true}
    width="300px"
    visible={false}
  >
    Nested dialog content
  </DialogComponent>
</DialogComponent>

Prop	Type	Description	Default	When to Use
`isModal`	boolean	Enable modal mode (blocks parent interaction)	false	Confirmations, alerts, critical actions
`visible`	boolean	Initial visibility state	false	Control initial dialog display
`header`	string \| JSX	Dialog header/title	-	Every dialog needs a title
`content`	string \| HTML \| JSX	Dialog body content	-	Main dialog information
`buttons`	ButtonPropsModel[]	Action buttons in footer	-	For OK/Cancel, action confirmations
`footerTemplate`	JSX	Custom footer content	-	When buttons prop doesn't fit
`showCloseIcon`	boolean	Show close button in header	false	Allow users to dismiss
`position`	PositionData	X/Y positioning (center, top, etc.)	{ X: 'center', Y: 'center' }	Custom placement
`allowDragging`	boolean	Enable drag functionality	false	Movable dialogs, floating panels
`enableResize`	boolean	Enable resize with grip	false	Resizable dialogs
`resizeHandles`	ResizeDirections[]	Which edges/corners resize	['All']	Control resize behavior
`width`	string \| number	Dialog width	'330px'	Control dialog size
`height`	string \| number	Dialog height	'auto'	Control dialog size
`minHeight`	string \| number	Minimum height	-	Prevent too-small resize
`animationSettings`	AnimationSettingsModel	Animation effect/duration/delay	-	Smooth open/close transitions
`closeOnEscape`	boolean	Close on Escape key press	true	Keyboard navigation
`target`	string (selector)	Container element	document.body	Modal positioning
`enableHtmlSanitizer`	boolean	Sanitize HTML content	true	Security (prevent XSS)
`cssClass`	string	Custom CSS classes	-	Styling and theming
`enableRtl`	boolean	Right-to-left rendering	false	RTL languages
`locale`	string	Culture/language code	'en-US'	Localization
`zIndex`	number	Stack order	-	Manage overlapping dialogs
`enablePersistence`	boolean	Persist state on reload	false	Remember size/position

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from 'react';

function App() {
  function showAlert() {
    DialogUtility.alert({
      title: 'Low Battery',
      width: '250px',
      content: '10% of battery remaining',
    });
  }
  return <ButtonComponent cssClass="e-danger" onClick={showAlert}>Alert</ButtonComponent>;
}
export default App;

const dialogObj = DialogUtility.alert({
  title: 'Info',
  content: 'Operation complete.',
  okButton: { click: () => { dialogObj.hide(); } }
});

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(); } }
});

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() }
});

npm install @syncfusion/ej2-react-popups --save

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-popups/styles/tailwind3.css";

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import './App.css';

function App() {
  return (
    <TooltipComponent content="Tooltip Content" position="TopCenter">
      <button className="e-btn">Show Tooltip</button>
    </TooltipComponent>
  );
}
export default App;

<TooltipComponent content="Submit the form" position="TopCenter">
  <button className="e-btn e-primary">Submit</button>
</TooltipComponent>

// Single TooltipComponent handles all .e-info targets; 
// each uses its own `title` attribute as content
<TooltipComponent target=".e-info" position="RightCenter">
  <form>
    <input className="e-info" type="text" title="Enter your name" />
    <input className="e-info" type="email" title="Enter a valid email" />
  </form>
</TooltipComponent>

<TooltipComponent
  content="Click the × to close me"
  opensOn="Click"
  isSticky={true}
  position="BottomCenter"
>
  <button className="e-btn">Click Me</button>
</TooltipComponent>

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
  let tooltipRef: TooltipComponent;
  const target = React.useRef<HTMLButtonElement>(null);

  return (
    <TooltipComponent
      ref={t => (tooltipRef = t)}
      content="Tooltip opened programmatically"
      opensOn="Custom"
    >
      <button
        ref={target}
        className="e-btn"
        onClick={() => {
          if (target.current.getAttribute('data-tooltip-id')) {
            tooltipRef.close();
          } else {
            tooltipRef.open(target.current);
          }
        }}
      >
        Toggle Tooltip
      </button>
    </TooltipComponent>
  );
}

<TooltipComponent
  content="Following your mouse!"
  mouseTrail={true}
  showTipPointer={false}
>
  <div style={{ width: '200px', height: '100px', background: '#eee' }}>
    Hover over me
  </div>
</TooltipComponent>

Prop	Type	Default	Purpose
`content`	`string \| HTMLElement \| Function`	—	Tooltip text, HTML, or JSX template
`target`	`string`	—	CSS selector for multi-target mode
`position`	`Position`	`'TopCenter'`	12 placement values
`opensOn`	`string`	`'Auto'`	Hover / Click / Focus / Custom
`isSticky`	`boolean`	`false`	Keep visible until user closes
`mouseTrail`	`boolean`	`false`	Follow mouse cursor
`showTipPointer`	`boolean`	`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
`animation`	`AnimationModel`	FadeIn/FadeOut 150ms	Open/close animation
`enableRtl`	`boolean`	`false`	Right-to-left rendering
`enableHtmlSanitizer`	`boolean`	`true`	Sanitize HTML content
`container`	`string \| HTMLElement`	`body`	Popup append target
`windowCollision`	`boolean`	`false`	Collision vs viewport