layout for qml custom tooltip

Question

I'm trying to create a custom tooltip in qml but am not able to force the widget to be displayed on top of other items in the layout. I know why qml behaves that way, but I can't find a method to make it behave like I want to.

Here's the code that demonstrates the problem:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480


    Flow {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 5

        Repeater {
            model: ["foo", "bar", "buzz"]

            delegate: Item {
                width: item.width
                height: item.height

                Rectangle {
                    id: item
                    color: "blue"
                    width: 100
                    height: 100

                    Text {
                        text: modelData
                        color: "white"
                        anchors.centerIn: parent
                    }
                }

                Rectangle {
                    width: 80
                    height: 120
                    color: "black"
                    anchors.left: item.right
                    anchors.leftMargin: 5

                    Text {
                        text: "tooltip"
                        color: "white"
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}

What I want to have is the tooltips on top of other items in the list, not the other way around.

Answer 1

I advice you to do that in the way I do it in one of my application. Unfortunately I cannot get the source now so I will try to remember.

You can create custom tooltip element, for example:

ToolTip.qml

import QtQuick 2.3

Rectangle {
    color:"black"
    width:100
    height: 30
    property string label: "tooltip"
    Text {
        color: "white"
        text: parent.label
        anchors.fill: parent
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }
}

Now, when some appropriate event occurs(onPositionChanged or onEntered) you can show your tooltip:

onEntered: {
    var component = Qt.createComponent("ToolTip.qml");
    if (component.status == Component.Ready) {
        var tooltip = component.createObject(rootElement);
        tooltip.x = xxx ///
        tooltip.y = xxx /// here you should adjust position of tooltip
    }
}

Pay attention - the parent of tooltip should be root element so you be sure that the tooltip item will be on top of the visual stack and not overlapped.

Answer 2

does it do the trick ?

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480

    Flow {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 5

        Repeater {
            id: repeater;
            model: ["foo", "bar", "buzz"]

            delegate: Item {
                width: item.width
                height: item.height
                z: repeater.model.length - index

                Rectangle {
                    id: item
                    color: "blue"
                    width: 100
                    height: 100

                    Text {
                        text: modelData
                        color: "white"
                        anchors.centerIn: parent
                    }
                }

                Rectangle {
                    width: 80
                    height: 120
                    color: "black"
                    anchors.left: item.right
                    anchors.leftMargin: 5

                    Text {
                        text: "tooltip"
                        color: "white"
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}