Force element to draw on top of peers?

[rscarson]

I am working on the following, a hover-hint element I can attach to things
Should I give up on this approach, since it draws beneath anything set after it and instead have a single element that passes callbacks around? Or is there a way to force it to draw over other elements

export component HoverHint inherits TouchArea {
    property <bool> should_show: root.text != "" && root.has-hover;

    in-out property <int> delay: 500;
    in-out property <string> text;

    Rectangle {
        height: t.height + 5px;
        width: t.width + 25px;
        x: root.mouse-x + 15px;
        y: root.mouse-y;
        border-width: 1px;
        border-radius: 2px;

        t := Text {
            text: root.text;
            font-weight: 500;
            
            states [
                hidden when !root.should_show : {
                    color: transparent;
                }

                visible when root.should_show : {
                    color: black;
                    in {
                        animate color { duration: 0; delay: 500ms; }
                    }
                }
            ]
        }
            
        states [
            hidden when !root.should_show : {
                background: transparent;
                border-color: transparent;
            }

            visible when root.should_show : {
                background: beige;
                border-color: self.background.darker(20%);
                in {
                    animate background, border-color { duration: 0; delay: 500ms; }
                }
            }
        ]
    }
}

[rscarson]

I have had no luck with the z property:

MyButton {
  HoverHint {
    // z here has no effect, it will always draw beneath MyButton2
  }
}
MyButton2 {
  HoverHint {
  }
}

[rscarson]

Decided to just render the label to the left instead of the right
derp

[hunger]

My naive approach would be something along these lines:

export component HoverHint inherits TouchArea {
    property <bool> should_show: root.text != "" && root.has-hover;

    in-out property <int> delay: 500;
    in-out property <string> text;

    @children

    Rectangle {
        height: t.height + 5px;
        width: t.width + 25px;
        x: root.mouse-x + 15px;
        y: root.mouse-y;
        border-width: 1px;
        border-radius: 2px;

        t := Text {
            text: root.text;
            font-weight: 500;
            
            states [
                hidden when !root.should_show : {
                    color: transparent;
                }

                visible when root.should_show : {
                    color: black;
                    in {
                        animate color { duration: 0; delay: 500ms; }
                    }
                }
            ]
        }
            
        states [
            hidden when !root.should_show : {
                background: transparent;
                border-color: transparent;
            }

            visible when root.should_show : {
                background: beige;
                border-color: self.background.darker(20%);
                in {
                    animate background, border-color { duration: 0; delay: 500ms; }
                }
            }
        ]
    }
}

and then use it like this:

HoverHint {
    MyButton { ... }
}

I hope this actually works, I admit I did not test it :-)

[bjorn]

Moving the HoverHint up the hierarchy is certainly a way to tackle the rendering order issue in some cases. Unfortunately it often doesn't work, since the relevant controls are usually in a hierarchy of their own. It gets even more tricky, when there are for loop and/or list views involved.

Hence, I think we need to use the PopupWindow, but it has other limitations. Unfortunately the addition of the changed handlers are still not enough to make this thing appear and disappear based on a change in hover state. Because, as soon as the popup is shown, it eats the mouse input and has-hover goes to false, so the following causes a flickering popup:

    touch-area := TouchArea {
        width: 100%;
        height: 100%;

        changed has-hover => {
            if (self.has-hover) {
                popup.show();
            } else {
                popup.close();
            }
        }
    }

    popup := PopupWindow {
        x: touch-area.mouse-x + 10px;
        y: touch-area.mouse-y + 10px;
        
        width: 100px;
        height: 20px;
        Rectangle { background: red; }
        Text { text: "Hello World"; }
    }

It would need to have an option where it lets mouse events go through, at least those outside of its geometry.

[bjorn]

See demo on Slintpad.

[rscarson]

I think PopupWindow should probably have an enabled property to control mouse-input passthrough

[rscarson]

I have opened a related issue, #6335