QML. Issues in positioning tooltips on top of other elements

Question

I'm working on a QML app which is essentially an toolbar with a set of buttons. I'd like to display tooltips when I hover my mouse over a button. However now the tooltip is being drawn below every button except the one that called it. Here's a bare-bones example that shows the problem

Button.qml

import QtQuick 1.1

Rectangle 
{
    property color buttonColor: "red"
    property color onHoverColor: "green"
    property color borderColor: "blue"


    property bool needTooltip: buttonMouseArea.containsMouse

    id: button
    width: 65
    height: 82

    radius: 1
    color: buttonColor

    signal buttonPressed()

    MouseArea{
        id: buttonMouseArea
        anchors.fill: parent    
        onClicked: buttonPressed()
        onPressed: button.color = borderColor
        onReleased: button.color = onHoverColor
        hoverEnabled: true

        onEntered: button.color = onHoverColor
        onExited:  button.color = buttonColor
     }

    Rectangle {
        id: tooltip
        width: 75; height: 20
        z: parent.z +10
        visible: false
        color: "peachpuff"
        Text {
            anchors.centerIn: parent
            text: "My Tooltip"
        }

        states: State {
            name: "inuse"
            when: needTooltip
            PropertyChanges {
                target: tooltip
                visible: true
                x: buttonMouseArea.mouseX + 5
                y: buttonMouseArea.mouseY - 25
            }
        }
    }
}

main.qml

import QtQuick 1.1

Rectangle {
    width: 1500
    height: 200

    Row
    {
        height: 80

        anchors.centerIn: parent
        spacing: 30

        Button{
            id: settingsButton;
        }
        Button{
            id: listButton;
        }
        Button{
            id: someOtherButton
        }

    }
}

How can I make the tooltips display above everything else in my program? Messing with button's and tooltip's z-axis didn't work

user1095108 user1095108 · Accepted Answer · 2014-02-13T14:15:39

You need to pull the tooltip outside of theButton.qmlcomponent, or write a hack that will detach the tooltipQDeclarativeItemfrom theQDeclarativeSceneit belongs to into a QDeclarativeScene that resides in a popup (aQDeclarativeView- i.e. aQWidgetwith appropriate attributes).

QML. Issues in positioning tooltips on top of other elements

1 Answers