Popup - Vaadin Add-on Directory

A content-rich small window that can be bound to target element

## Usage The Popup is a small window, bound to a target component either by id or an element reference, that can be used to present information and user interface elements in an overlay. ### Opening The Popup can be opened: * by clicking the target element (if configured) * or programmatically using show/hide methods ### Closing The Popup can be closed: * when you click outside of the Popup * when you click the Popup content (this is configurable) * programmatically by calling show()/hide() methods - for example, by adding a close button to the header or footer of the Popup * by scrolling the outside content of the page if the Popup is set to be modeless. This is useful when using Popup in the Grid, for example. ### Structure The Popup component has a static header and footer areas and a content area between them. The header and footer are optional and automatically hidden if empty and not explicitly enabled. ### Header The header contains an optional title element and a slot next to it for custom header content, such as a close button. popup.setHeaderTitle("This is title"); popup.getHeader().add(closeButton); ### Footer Buttons for closure actions, such as Save, Cancel, Delete, and so on, can be placed in the footer. Footer content is right-aligned by default. popup.getFooter().add(cancelButton); ### Modality A modal Popup blocks the user from interacting with the rest of the user interface while the Popup is open. A non-modal Popup, however, doesn’t block interaction. popup.setModeless(true); ### Focusable The Popup can be set to receive focus and to trap the focus inside the Popup. If focus is trapped, the Tab key cycles focus on focusable elements inside the Popup. popup.setFocusTrap(true); ### Positioning The default positioning of the Popup in relation to the target element can be overridden. This can be useful for optimizing where the tooltip is rendered, to avoid overlaying other important UI elements, or for purely aesthetic reasons. The default position is at the bottom of the target element. The popup alignment to the target element can also be configured (default or centered). popup.setPosition(PopupPosition.END); popup.setAlignment(PopupAlignment.CENTER); ### Triggering Manually Popups can be configured not to appear automatically on target element click but instead be programmatically triggered only. popup.setIgnoreTargetClick(false); ### Pointer arrow The Popup can be configured to show a little pointer arrow toward the target element. popup.addThemeVariants(PopupVariant.LUMO_POINTER_ARROW); ### Target highlighting The Popup can be configured to highlight the target element, increasing the visual importance of the target element. popup.setHighlightTarget(true) ### Onboarding (Walkthrough) The Popup AddOn package contains a simple API to make it easy to create "User onboarding" - also known as Walkthrough. When configured, the Onboarding shows a series of Popups - steps of the Onboarding - with Next and Previous buttons. There are two classes to configure it: Onboarding and OnboardingStep. To use it, create an instance of the Onboarding class and fill it with the OnboardingSteps. In the simplest form, you only have to provide three things for each OnboardingStep: a target element, a header text, and a content text. OnboardingStep step1 = new OnboardingStep(targetElement); step1.setHeader("Start here"); step1.setContent("Content here...."); Onboarding onboarding = new Onboarding(); onboarding.addStep(step1); ... onboarding.addStep(step2); onboarding.addStep(step3); ... onboarding.start() ## Client-side implementation This is the server-side (Java) API for Vaadin Platform for the vcf-popup component. Looking for the client-side version? It can be found here: https://vaadin.com/directory/component/vaadin-component-factoryvcf-popup ## Sponsored development Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)

Client Side
View on GitHub
Online Demo

Popup version 1.1.0
Updated client dependency to vcf-popup v1.1.0

Popup version 2.0.0
- Added npm support - Component now supports both bower and npm modes

Popup version 2.1.1
### Version 2.1.1 - Improvement: Popup is opened above target component if there is no space below

Popup version 2.1.2
### 2.1.2 - Updated to use vcf-popup 1.2.1 which supports propagation of theme attribute

Popup version 2.1.3
### Version 2.1.3: Fixing Vaadin 14.1 compatibility issue

Popup version 2.1.4
### Version 2.1.4 - Fixing issue of overlay styles leaking in npm mode

Popup version 2.2.0
### Version 2.2.0 - Added PopupOpenChangedEvent and listener

Popup version 2.2.1
### Version 2.2.1 - Changed to Apache 2 license - Works only in npm mode

Popup version 2.2.2
### Version 2.2.2 - Fixes issue with Popup getting lost when using @PreserveOnRefresh

Popup version 2.2.3
### Version 2.2.3 - Removing some debug logging

Popup version 2.2.4
Fix a Javascript error when the popup is used in a Grid

Popup version 2.2.5
### Version 2.2.5 - Fixes scrolling issue when using inside Grid's cell

Popup version 3.0.0
### Version 3.0.0 - Fix issues due Vaadin 22.0.0 - Vaadin 22+ required

Popup version 4.0.0
#### New features: * Updates to make component compatible with Vaadin 24.

Popup version 23.3.0
#### New Features - upgraded dependency to 23.3.0 version of the Popup web component - added the possibility to set header title - added the possibility to easily add components to the header and footer of the popup - popup can be displayed either modal or modeless - added the possibility to close the popup automatically on scroll, when in modeless mode - added a convenient way how to add popups to components rendered in Grids (ComponentWithPopupRenderer) #### Fixes - Fixed positioning issues on small screens and near the edges of the browser - Fixed displaying on mobiles (appearing as a bottom drawer again)

Popup version 24.0.0
This version is a Vaadin 24 compatible version of features and fixes introduced in [version 23.3.0](https://vaadin.com/directory/component/popup/23.3.0)

Popup version 23.3.1
#### Improvements * improved theming: target element now has 'has-popup' and 'popup-opened' attributes, so it can be better styled when a Popup is attached to it * improved focus handling: Popup now receives focus when opened; focus cycles through focusable elements inside the Popup * modeless Popup can now be closed using ESC (the same way as modal Popup) * better keyboard navigability for Grid cells generated using ComponentWithPopupRenderer - press the spacebar on the focused cell to open the Popup

Popup version 24.0.1
#### Improvements * improved theming: target element now has 'has-popup' and 'popup-opened' attributes, so it can be better styled when a Popup is attached to it * improved focus handling: Popup now receives focus when opened; focus cycles through focusable elements inside the Popup * modeless Popup can now be closed using ESC (the same way as modal Popup) * better keyboard navigability for Grid cells generated using ComponentWithPopupRenderer - press the spacebar on the focused cell to open the Popup

Popup version 23.3.2
#### Improvements * Feature: Onboarding Walkthrough - use the new `Onboarding` and `OnboardingStep` classes to easily create walkthroughs using a series of Popups (Next and Previous buttons included!) * Feature: Highlighting the target element (`setHighlightTarget` method) * Feature: Popup can now show a little pointer arrow towards the target element (the "pointer-arrow" theme variant) * Configuration: A position of the Popup can now be configured (see `PopupPosition.BOTTOM` and `PopupPosition.END`) * Configuration: Popup can also be shown centered to the target element (see `PopupAlignment.CENTER`) * Configuration: configure if the Popup receives focus upon opening or not (not by default) - see method `setFocusTrap` * Configuration: Prevent opening the Popup when a target is clicked (see `setIgnoreTargetClick` method) * Configuration: Set target Element directly - no need for target HTML ID (see `setTarget`) #### Fixes * Fixed unwanted reopening of the Popup when it is closed using the spacebar in Grid

Popup version 24.0.2
#### Improvements * Feature: Onboarding Walkthrough - use the new `Onboarding` and `OnboardingStep` classes to easily create walkthroughs using a series of Popups (Next and Previous buttons included!) * Feature: Highlighting the target element (`setHighlightTarget` method) * Feature: Popup can now show a little pointer arrow towards the target element (the "pointer-arrow" theme variant) * Configuration: A position of the Popup can now be configured (see `PopupPosition.BOTTOM` and `PopupPosition.END`) * Configuration: Popup can also be shown centered to the target element (see `PopupAlignment.CENTER`) * Configuration: configure if the Popup receives focus upon opening or not (not by default) - see method `setFocusTrap` * Configuration: Prevent opening the Popup when a target is clicked (see `setIgnoreTargetClick` method) * Configuration: Set target Element directly - no need for target HTML ID (see `setTarget`) #### Fixes * Fixed unwanted reopening of the Popup when it is closed using the spacebar in Grid

Popup version 23.3.3
#### Improvements * Improved Popup accessibility by using `role="dialog"` on the overlay and setting proper `aria-label` * Added possibility to set the `aria-label` of the popup overlay from Java API

Popup version 24.0.4
#### Improvements * Improved Popup accessibility by using `role="dialog"` on the overlay and setting proper `aria-label` * Added possibility to set the `aria-label` of the popup overlay from Java API

Popup version 23.3.4
#### Improvements * add a possibility to scroll the target element into view on Popup open * make restoreFocusOnClose an optional feature (default is true to keep the backward compatibility) * scroll the Onboarding step target element into view when a step is executed #### Fixes * fix: prevent temporarily displaying unattached Popup when using you are setting the target element and opening the Popup in a single server roundtrip * Settings of Popups used in the Onboarding feature have been fine-tuned for better user experience (no blinking, no jumping around the page between steps)

Popup version 24.0.5
#### Bug fixes: * fix setTarget not showing popup when using preserve on refresh ([#21](https://github.com/vaadin-component-factory/popup/issues/21))

Popup version 23.3.5
#### Bug fixes: * fix setTarget not showing popup when using preserve on refresh ([#21](https://github.com/vaadin-component-factory/popup/issues/21))

Popup version 24.1.0
Fix the issue when the popup is closed when clicking on an overlay (like Select/Combobox).

Popup version 24.1.1
Update the component version to close the element when click on target when modeless = true