Skip to main content

Popover

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

modifier Popover
import { Popover, Text, 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")
        }
    }
}

export var main = ButtonWithToolTip()

Constructors​

(visible:direction:alignment:alignment_offset:spacing:​children)​

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.

Horizontal Offset Vertical Offset

spacing: Float = 0​

An additional gap between the anchor component and the popover.

direction: down (alignment: center)

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.

Enums​

PopoverAlignment​

How the popover aligns to the anchor.

enum PopoverAlignment {
    leading,
    center,
    trailing,
}

In the examples below the green line indicates the virtual anchor line. The value behaves the same for up & down or left & right

leading​

Aligns the leading edges of the anchor and popover.

alignment: leading (direction: down)

alignment: leading (direction: right)

center​

Aligns the center of the anchor and popover.

alignment: center (direction: down)

alignment: center (direction: right)

trailing​

Aligns the trailing edges of the anchor and popover.

alignment: trailing (direction: down)

alignment: trailing (direction: right)

PopoverDirection​

The direction in which the popover opens around the anchor component.

enum PopoverDirection {
    up,
    down,
    left,
    right,
}

up​

direction: up (alignment: center)

down​

direction: down (alignment: center)

left​

direction: left (alignment: center)

direction: right (alignment: center)