@syncfusion/ej2-popups

What is @syncfusion/ej2-popups?

@syncfusion/ej2-popups is a package that provides a variety of popup components such as dialogs, tooltips, and popovers. These components are highly customizable and can be used to create interactive and user-friendly web applications.

What are @syncfusion/ej2-popups's main functionalities?

Dialog

The Dialog component is used to create modal dialogs. It supports various features like headers, footers, buttons, and more.

const dialog = new ej.popups.Dialog({ header: 'Dialog', content: 'This is a dialog', showCloseIcon: true, buttons: [{ click: () => dialog.hide(), buttonModel: { content: 'OK', isPrimary: true } }] }); dialog.appendTo('#dialog');

Tooltip

The Tooltip component provides additional information when users hover over an element. It is highly customizable and can be positioned in various ways.

const tooltip = new ej.popups.Tooltip({ content: 'This is a tooltip' }); tooltip.appendTo('#tooltip');

Popover

The Popover component is used to display additional content in a popup that is anchored to a specific element. It can contain any HTML content and is highly customizable.

const popover = new ej.popups.Popover({ content: 'This is a popover', target: '#popoverTarget' }); popover.appendTo('#popover');

Other packages similar to @syncfusion/ej2-popups

react-modal

react-modal is a popular package for creating accessible modal dialogs in React applications. It provides a simple API and is highly customizable, but it is limited to React.

tippy.js

tippy.js is a lightweight and highly customizable tooltip and popover library. It supports various features like animations, themes, and interactive content, making it a versatile alternative to @syncfusion/ej2-popups.

sweetalert2

sweetalert2 is a popular library for creating beautiful and responsive alert dialogs. It provides a wide range of customization options and is easy to use, but it is primarily focused on alert dialogs rather than a full suite of popup components.

README

ej2-popups

The popup components such as dialog and tooltip are used to display information in a popup to users. The dialog component provides modal/non-modal (modeless), built-in buttons, positioning, animation, draggable, and template features and helps to create alert, prompt, and confirmation dialogs easily. The tooltip component is used to display a popup that contains some information or message when you hover, click, focus, or touch an element. The information displayed in the tooltip can include simple text, images, hyperlinks, or custom templates.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Setup

To install popup components and its dependent packages, use the following command

npm install @syncfusion/ej2-popups

Components Included

Following list of components are available in the package

Dialog

• Getting Started
• View Online Demos
• Product Page

Tooltip

• Getting Started
• View Online Demos
• Product Page

Supported Frameworks

These components are available in following list of:

1. Angular
2. React
3. Vue
4. ASP.NET Core
5. ASP.NET MVC
6. JavaScript (ES5)

Use-case samples / Showcase samples

• Expanse Tracker (Source, Live Demo)
• Story Estimator (Source, Live Demo)
• Diagram Builder (Source, Live Demo)
• IT Asset Management (Live Demo)
• Webmail (Source, Live Demo)
• Loan Calculator (Source, Live Demo)

Key Features

Dialog

• Modal - Displays the important information to users.
• Positioning - Supports to customize its display position.
• Animation - Offers to set animation effects on open and close the dialog.
• Template - Provides an option to customize its header and footer.
• Built-in buttons - Provides a built-in support to add buttons to its properties.

Tooltip

• Positions - Allows you to display the tooltip in 12 different positions.
• Animation - Supports animation effects while showing/hiding the tooltip.
• Content - Assigns with static text, template, or loaded dynamically via AJAX.
• Opening modes - Supports four opening modes such as hover, click, focus, and custom.
• Smart positioning - Supports auto tip positioning.
• Mouse trail - Moves along with mouse pointer using the mouse trailing option.
• Sticky mode - Opens in sticky mode, and allows you to close/hide the Tooltip manually.

Support

Product support is available for through following mediums:

• Creating incident in Syncfusion Direct-trac support system or Community forum.
• New GitHub issue.
• Ask your query in Stack Overflow with tag syncfusion and ej2.

License

Check the license detail here.

Changelog

Check the changelog here.

© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.