A content-rich small window that can be bound to target element
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.
The Popup can be opened:
- by clicking the target element (if configured)
- or programmatically using show/hide methods
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.
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.
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.
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.
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).
Popups can be configured not to appear automatically on target element click but instead be programmatically triggered only.
The Popup can be configured to show a little pointer arrow toward the target element.
The Popup can be configured to highlight the target element, increasing the visual importance of the target element.
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()
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
Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing
Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.
- Fix issues due Vaadin 22.0.0
- Vaadin 22+ required
- Apache License 2.0
- Vaadin 20+
- Vaadin 10+ in 1.1.0
- Vaadin 14+ in 2.0.0
- Vaadin 23 in 23.3.0
- Vaadin 24 in 4.0.0
- Google Chrome
- Internet Explorer
- Microsoft Edge