Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-popover-flow</artifactId>
</dependency>
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-popover-addons-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.popover.Popover;
import de.mate_ds.flow.component.popoveraddons.Onboarding;
import de.mate_ds.flow.component.popoveraddons.Onboarding.OnboardingStep;
import de.mate_ds.flow.component.popoveraddons.PopoverContent;

Variants

Default

Anchor anchor = new Anchor("#", "Details anzeigen");

Popover popover = new Popover();
popover.setTarget(anchor);

PopoverContent content = new PopoverContent();
content.setTitleText("Gruppenüberschrift");

FacetList facetList = new FacetList();
facetList.add(
    new Facet("Schlüssel", "Wert"),
    new Facet("Weiterer Schlüssel", "Weiterer Wert")
);
content.add(facetList);
content.getFooter().add(new Button("Aktion"));

Onboarding

H4 target1 = new H4("How to use Popup to create an onboarding experience");
Span target2 = new Span(
        "The idea is to use the Popup component to create a simple Onboarding (also known as Walkthrough) experience for the user."
                + " A simple API was created as part of the component to make it easy to create such onboarding."
                + " There are two classes: 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.");
Button target3 = new Button("Some action");
Onboarding oboarding = new Onboarding();
MyOnboardingStep s1 = new MyOnboardingStep(
        "Welcome!",
        new Facet(
                "The feature is explained here",
                "You can associate the Onboarding Step with any Component on the screen. Note: This popup is configured to show the walkthrough steps in the footer."));
            s1.setTarget(target1);
MyOnboardingStep s2 = new MyOnboardingStep(
        "Bottom positioned",
        new Facet("The feature is explained here", "Popup for this step is positioned to the bottom of the target element."));
            s2.setTarget(target2);
            s2.setPosition(PopoverPosition.BOTTOM);
MyOnboardingStep s3 = new MyOnboardingStep(
        "Components",
        new Facet(
                "This step allows linking to other parts of the application",
                new Span("You can integrate "),
                new Anchor("#", "links"),
                new Span(" as well as CTA-Buttons in the explantation to nudge users to other onboarding activities so they are setup for success.")),
        new Button("Another action"));
            s3.setTarget(target3);
MyOnboardingStep s4 = new MyOnboardingStep("No target set", new Span("This onboarding step does not have any related target element"));
            oboarding.setRenderer(step -> {
        return new VerticalLayout(((MyOnboardingStep) step).getComponents());
        });
        oboarding.setSteps(s1, s2, s3, s4);

Button start = new Button("Start walkthrough", e -> oboarding.start());
            start.addThemeVariants(ButtonVariant.LUMO_PRIMARY);