Syncfusion® Blazor Popup Components

A comprehensive suite of Blazor popup components for displaying modal and modeless dialogs, tooltips, and other overlay content. Includes Dialog and Tooltip components.

Supported components

This package includes the following components:

• Blazor Dialog
• Blazor Tooltip

Blazor Dialog component

The Blazor Dialog component is a useful user interface for informing users about critical information, errors, warnings, and questions, as well as confirming decisions and collecting input.

Key features:

• Modal and Modeless: Support for both modal dialogs (blocks interaction) and modeless dialogs (non-blocking)
• Action Buttons: Built-in OK, Cancel, and custom action buttons
• Positioning: Customizable dialog positioning on the screen
• Dragging: Drag dialogs to reposition them
• Resizing: Resize dialog windows dynamically
• Animation: Built-in animation effects for dialog open/close
• Templates: Support for header, content, and footer templates
• Mobile Support: Responsive dialog support for mobile devices
• Accessibility: Full keyboard navigation and ARIA support

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Tooltip component

The Blazor Tooltip component is a pop-up that shows information or messages when users hover, click, focus, or touch an element.

Key features:

• Multiple Trigger Types: Show on hover, click, focus, or touch events
• Rich Content: Support for text, images, hyperlinks, and custom templates
• Positioning: Flexible tooltip positioning (top, bottom, left, right)
• Animation: Built-in animation effects for tooltip appearance
• Responsive: Adapts positioning for different screen sizes
• Offset Control: Customize tooltip offset and spacing
• Keyboard Navigation: Full keyboard support for accessibility
• Custom Styling: CSS and theme customization options

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

Dialog

<SfDialog Width="250px">
    <DialogTemplates>
        <Content> This is a Dialog with content </Content>
    </DialogTemplates>
</SfDialog>

Tooltip

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfTooltip ID="Tooltip" Target="#btn" Content="@Content">
    <SfButton ID="btn" Content="Show Tooltip"></SfButton>
</SfTooltip>

@code
{
    string Content = "Lets go green & Save Earth !!";
}

Support

• Support portal
• 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 Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET