← Back

Popup

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

Author

Contributors

Rating

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.

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);

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

Directory