Popover

Displays content in a layer above all other components anchored around the component it is applied to.

modifier Popover

Example

import { Popover, Text, Padding, Background, Rectangle, TapGesture, TapGestureEvent } from ui

component ButtonWithToolTip {
    show_tip: Bool = false

    Text("Click Me") with {
        Padding(8)
        Background {
            Rectangle(color: Color(0xFFDFDFDF))
        }
        TapGesture(fun (event: TapGestureEvent) {
            self.show_tip = not self.show_tip
        })
        Popover(visible: self.$show_tip) {
            Text("You found me", color: Color(0xFFFFFFFF)) with {
                Padding(8)
                Background {
                    Rectangle(color: Color(0xFFFF5F52))
                }
            }
        }
    }
}

export var main: Component = ButtonWithToolTip()

Tapping the button toggles the popover, which opens below the anchor (the default down direction):

Constructors

Two constructors are available, with the same set of parameters, but a choice of type for visible:

Binding

constructor(visible: $<Bool>, direction: PopoverDirection = PopoverDirection.down, alignment: PopoverAlignment = PopoverAlignment.center, alignment_offset: Float = 0, spacing: Float = 0, children: Template())

visible: $<Bool>

Configures the visibility of the popover. Since the popover closes automatically when clicked outside, it will set the bound value to false.

direction: PopoverDirection = PopoverDirection.down

In which direction around the component the popover should open.

info

If the popover does not fit in the specified direction, it will be automatically mirrored, e.g. from left to right. If through mirroring it still does not fit, it will be repositioned to fit the application frame.

See PopoverDirection

alignment: PopoverAlignment = PopoverAlignment.center

How the popover is aligned to the anchor.

info

If the popover does not fit in the available space with the leading alignment value, it will be automatically repositioned with trailing alignment, and vice-versa.

See PopoverAlignment

alignment_offset: Float = 0

An additional shift from the alignment line. The direction of the offset depends on the direction of the popover.

spacing: Float = 0

An additional gap between the anchor component and the popover.

children: Template()

The children to place in the popover.

The children property doesn't have to be listed explicitly. Instead you can simply have a trailing block, like in the example above.

---

Direct Value (8.5.1)

constructor(visible: Bool, direction: PopoverDirection = PopoverDirection.down, alignment: PopoverAlignment = PopoverAlignment.center, alignment_offset: Float = 0, spacing: Float = 0, children: Template())

visible: Bool

Configures the visibility of the popover. The popover never automatically closes and lets mouse events pass through to the background. Use this for a more granular control of the popover close behavior.

direction: PopoverDirection = PopoverDirection.down

In which direction around the component the popover should open.

info

If the popover does not fit in the specified direction, it will be automatically mirrored, e.g. from left to right. If through mirroring it still does not fit, it will be repositioned to fit the application frame.

See PopoverDirection

alignment: PopoverAlignment = PopoverAlignment.center

How the popover is aligned to the anchor.

info

If the popover does not fit in the available space with the leading alignment value, it will be automatically repositioned with trailing alignment, and vice-versa.

See PopoverAlignment

alignment_offset: Float = 0

An additional shift from the alignment line. The direction of the offset depends on the direction of the popover.

spacing: Float = 0

An additional gap between the anchor component and the popover.

children: Template()

The children to place in the popover.

The children property doesn't have to be listed explicitly. Instead you can simply have a trailing block, like in the example above.

Layout Behavior

No layouts effects for the anchor component.

The popover content has the size of the entire scene available.