PopupComponent

This component creates a popup.

A popup should be used to position content like tooltip or popover automatically in the right place near a trigger. It will pop(ped)up on every event which handledBy given handler.

A popup mainly consists of trigger the Elements which calls the content which will be display after call the trigger. It will be rendered on an own managed context.

It can be configured by

• offset the space (in px) between trigger and content

• placement of the content around the trigger

• flipping if there is not enough space near chosen placement available, it will try to find a fitting placement automatically

trigger provides two handlers which can be used within the trigger context:

• The first is used to open/toggle the content.

• The second closes it.

content provides only one close handler.

Example usage:

// tooltip alike behaviour: opens and closes by hovering the trigger with the mouse
popup {
    trigger { toggle, close ->
        span {
            +"hover me"
            mouseenters.map { it.currentTarget } handledBy toggle
            mouseleaves.map { } handledBy close
        }
    }
    content {
        div { +"my content" }
    }
    // some positioning stuff
    offset(10.0)
    flipping(false)
    placement { bottomEnd }
}

// popover alike behaviour: opens / closes by click; additional closing by click into popup content!
popup {
    trigger { toggle, _ ->
        span {
            +"click me to toggle"
            clicks.map { it.currentTarget } handledBy toggle
        }
    }
    content { close ->
        div { +"click me to close " }
        clicks.map { } handledBy close
    }
}

The popup uses an internal storepopupStore of TriggerInformation to find the right position of the content