@syncfusion/react-popups/README.md

A package of React popup components such as Tooltip that is used to display information or messages in separate pop-ups.

# React Popups Components

## What's Included in the React Popups Package

The React Popups package includes the following component.

### React Dialog

The Dialog component is a modal pop-up used to display important information, gather user input, or present detailed content without navigating away from the current page. It offers flexible positioning, interaction, and customization options to suit various application needs.

Explore the demo [here](https://react.syncfusion.com/dialog).

**Key features**

- **Positioning:** Control where the dialog appears on the screen using the position property, allowing alignment relative to the viewport.

- **Full-Screen Mode:** Enable the fullscreen property to make the dialog occupy the entire screen—ideal for mobile layouts or content-heavy dialogs.

- **Draggable Dialog:** Make the dialog movable by enabling the draggable property, allowing users to reposition it by dragging the header.

- **Resizable Dialog:** Allow users to resize the dialog by enabling the resizable property, which is useful for content that may vary in size.

- **Custom Animations:** Use the animation property to apply custom open and close animations, enhancing the visual experience and user feedback.

### React Tooltip

The Tooltip component displays additional information when users hover, click, or focus on an element. It provides a flexible way to enhance user experience by showing contextual information.

Explore the demo [here](https://react.syncfusion.com/tooltip).

**Key features**

- **Multiple Trigger Modes:** Display tooltips through various interaction methods including hover, click or focus.

- **Positioning:** Place tooltips in 12 different positions (TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, LeftTop, LeftCenter, LeftBottom, RightTop, RightCenter, RightBottom).

- **Animation Effects:** Choose from 15 built-in animation effects for both opening and closing tooltips.

- **Follow Cursor:** Option to make tooltips follow the mouse cursor movement.

- **Sticky Mode:** Keep tooltips open until explicitly closed by the user.

- **Arrow Pointer:** Configurable arrow pointer that indicates which element the tooltip relates to.

<p align="center">
Trusted by the world's leading companies
  <a href="https://www.syncfusion.com/">
    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
  </a>
</p>

## Setup

To install `popups` and its dependent packages, use the following command,

```sh
npm install @syncfusion/react-popups
```

## Support

Product support is available through following mediums.

* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
* Live chat

## Changelog

Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/popups/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.

## License and copyright

> 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](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).

> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.

&copy; Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.