How to create a Popup outside of window area?

Kamichanw

I'm trying to implement custom ToolTip. But as we all know, a Popup or a ToolTip is unable to show outside of the root window. I've tried to use Window instead, however, when parent Window has been closed, the window tooltip still existed. Anyone knows a better solution?

Kamichanw

@johngod Thanks a lot! The key to achieve my goal is to set flags of Window to Qt.ToolTip. After setting this, the window tooltip will close automatically after parent window destruction.

In order to allow future people to quickly see the answer, I decided to set my summary as the correct solution. But at the same time, people who read this post later must note that it was @johngod who came up with the solution to the problem.

Bob64

@Kamichanw I asked something similar some time ago. The only option, if you want a popup that can exist outside the bounds of the main window, is to use a Window. You might need to implement the close logic yourself, perhaps based on the visible property of the parent Window?

Kamichanw

@Bob64 Haha. Yes, I do know you asked before, and you answered similarly to another one, which inspired me to use Window.

Now, I add a new property to my window tooltip named parent to simulate the parent of other components, and set this property explicitly in onContainsMouseChanged of a MouseArea that hold by item that want to open this tooltip. Then, I connect onVisibleChanged of parent in Connections but it doesn't work.

Connections {
        target: parent
        enabled: parent !== undefined
        function onVisibleChanged() {
            if (parent.visible === false)
                close()
        }
}

In detail, on component completed, qml debugger shows: Unable to assign [undefined] to QObject. This is obvious since parent is not assigned a value until MouseArea contains mouse. However, when I closed parent window, function onVisibleChanged() didn't be called.

Bob64

@Kamichanw I'm sorry I don't really have any other suggestions. One problem I see is that Window does not emit many signals for important events so it seems like it might be more tricky than it should be. I have tended to use modal popups so have not faced this issue.

As a general remark, I find it a bit odd that QML does not offer much support for this. When I asked my original question, I got the impression that some people thought it was a slightly weird thing to ask. I wonder whether it is because I am trying to use QML on desktop and a lot of other people are not?

johngod

I was bored so I implement this really dirty tooltip, see if it helps

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Window {
        id: rect
        width: 450
        height: 450
        //color: "yellow"
        visible: true

        onVisibleChanged: {
            //tTip.visible = false
        }

        Rectangle {
            id: btn1
            width: 50
            height: 50
            color: "red"

            Text {
                text: qsTr("button1")
            }

            MouseArea {
                id: ma1
                anchors.fill: parent
                hoverEnabled: true

                onContainsMouseChanged: {
                    if (containsMouse) {
                        tTip.btn = ma1
                        tTip.myParent = rect
                    }
                }
            }
        }


        Rectangle {
            id: btn2
            x: 100
            width: 50
            height: 50
            color: "orange"

            Text {
                text: qsTr("button2")
            }

            MouseArea {
                id: ma2
                anchors.fill: parent
                hoverEnabled: true

                onContainsMouseChanged: {
                    if (containsMouse) {
                        tTip.btn = ma2
                        tTip.myParent = rect
                    }
                }
            }
        }


    }

    Window {
        id: tTip
        width: 250
        height: 250
        color: "yellow"

        property var btn
        property var myParent

        visible: btn.containsMouse && myParent.visible
        Text {
            id: name
            text: qsTr("tooltip")
        }

        flags: Qt.ToolTip
    }
}

Also please check this link, it has a more elaborated tooltip example https://www.vikingsoftware.com/blog/implementing-tool-tips-in-qml/

Kamichanw

@johngod Thanks a lot! The key to achieve my goal is to set flags of Window to Qt.ToolTip. After setting this, the window tooltip will close automatically after parent window destruction.

In order to allow future people to quickly see the answer, I decided to set my summary as the correct solution. But at the same time, people who read this post later must note that it was @johngod who came up with the solution to the problem.