Syncfusion.AspNetMvc.Popups

Syncfusion® ASP.NET MVC Popups Components

A comprehensive suite of ASP.NET MVC popup and overlay components for building modal and modeless dialogs, tooltips, and loading states. Includes Dialog, Tooltip, and Spinner components.

Supported Components

This package includes the following components:

• Dialog
• Tooltip
• Spinner

ASP.NET MVC Dialog Component

The ASP.NET MVC Dialog Component provides modal and modeless dialog windows for displaying content, confirmations, and user input overlays.

Key Features:

• Modal & Modeless: Supports both blocking modal and non-blocking modeless display modes
• Predefined Dialogs: Built-in utility functions for Alert, Confirm, and Prompt dialogs
• Header & Footer: Configurable header title, close icon, and action button footer
• Drag & Resize: Enable users to reposition and resize the dialog interactively
• Content Template: Render any HTML content or Razor partial inside the dialog body
• Animation: Configurable open/close animation effects
• Overlay: Customizable backdrop overlay with overlayClick event support
• Close on Escape: Optionally close the dialog by pressing the Escape key
• Positioning: Set dialog position relative to the viewport or a specific target element

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Tooltip Component

The ASP.NET MVC Tooltip Component displays informational pop-ups when users hover, click, focus, or touch a target element.

Key Features:

• 12 Positions: Display tooltip in 12 different positions relative to the target
• Open Modes: Supports Hover, Click, Focus, and Custom trigger modes
• Rich Content: Content can be plain text, HTML, images, hyperlinks, or custom templates
• Dynamic Content: Load tooltip content dynamically via Fetch/AJAX in beforeRender event
• Multiple Targets: Attach a single tooltip to multiple targets within a container using CSS selectors
• Animation: Configurable show/hide animation effects
• Sticky Mode: Keep tooltip open until the user manually closes it via a close icon
• Mouse Trail: Move tooltip along with the mouse pointer
• Open/Close Delay: Configurable openDelay and closeDelay in milliseconds
• Auto Tip Position: Automatically repositions the tip pointer to stay within the viewport

Documentation

• Getting Started
• API Reference
• Live Demos

Common Setup

These setup steps are required only once for your application, regardless of which Syncfusion components you use.

1. Install Base NuGet Package

Install-Package Syncfusion.AspNetMvc.Popups

2. Add Namespace Reference

Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

3. Add Stylesheet & Script References

In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - Syncfusion Application</title>
    
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.30/fluent2.css" />
    
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/34.1.30/dist/ej2.min.js"></script>
</head>

4. Register Script Manager

At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):

<body>
    @RenderBody()
    
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Quick Start

Step 1: Add ASP.NET MVC Buttons control

Add the Syncfusion® ASP.NET MVC Buttons control ~/Views/Home/Index.cshtml page:

<!-- Tooltip -->
<div style='display: inline-flex; position: relative; left: 50%; transform: translateX(-50%); margin-top: 100px;'>    
    @Html.EJS().Tooltip("Tooltip")
        .Content("Lets go green & Save Earth !!!")
        .Position(Syncfusion.EJ2.Popups.Position.TopCenter)
        .ContentTemplate(@<span id='target'>
            Show Tooltip
        </span>)
        .Render()
</div>

Step 2: Create controller ~/Controllers/HomeController.cs

using Syncfusion.EJ2.Buttons;

public class HomeController : Controller
{
    public ActionResult Index()
    {
        List<SpeedDialItem> items = new List<SpeedDialItem>
        {
            new SpeedDialItem { IconCss = "e-icons e-cut", Text = "Cut" },
            new SpeedDialItem { IconCss = "e-icons e-copy", Text = "Copy" },
            new SpeedDialItem { IconCss = "e-icons e-paste", Text = "Paste" }
        };
        
        ViewBag.DataSource = items;
        return View();
    }
}

Step 3: Run the Application

Press Ctrl+F5 to run the application in your browser.

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET MVC | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

[email protected] | Toll Free: 1-888-9-DOTNET