PopupComponent

open class PopupComponent : EventProperties<HTMLElement>

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
    }
}