QML ToolTip delay property is not working

Julien B

Hello all,

I encounter a problem with the delay property in QML ToolTip

I first tried to add a simple TooTip to a button with Attached Porperty delay and timeout

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640; height: 480
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        color: "#ff202020"

        Button {
            anchors.centerIn: parent
            width: 196; height: 64

            contentItem: Text {
                text: "Button"
                color: parent.pressed ?"#ff202020":"#ffffffff"
                font.pixelSize: 32
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            background: Rectangle {
                color: parent.pressed ? "#ffffffff":"#00000000"
                border.color: "#ffffffff"
                border.width: 2
                anchors.fill: parent
            }

            ToolTip.visible: pressed
            ToolTip.delay: 1000
            ToolTip.timeout: 3000
            ToolTip.text: qsTr("Simple Tool tip attached to \"Button\" with several lines of text")

        }
    }
}

It works fine but I need to use a customized version of the ToolTip, so I changed it to the version below

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640; height: 480
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        color: "#ff202020"

        Button {
            anchors.centerIn: parent
            width: 196; height: 64

            contentItem: Text {
                text: "Button"
                color: parent.pressed ?"#ff202020":"#ffffffff"
                font.pixelSize: 32
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            background: Rectangle {
                color: parent.pressed ? "#ffffffff":"#00000000"
                border.color: "#ffffffff"
                border.width: 2
                anchors.fill: parent
            }

            ToolTip {
                visible: parent.pressed
                delay: 1000
                timeout: 3000

                contentItem: Text {
                    text: qsTr("Simple Tool tip attached to \"Button\" with several lines of text")
                    font.pixelSize: 24
                    wrapMode: Text.WordWrap
                    color: "#ffffff"
                    verticalAlignment: Text.AlignVCenter
                }

                background: Rectangle {
                    implicitHeight: 64
                    radius: 8
                    color: "#ff404040"
                }
            }

        }
    }
}

The style is applied, the timeout still works but the delay does not work anymore and I don't understand why.

Does someone have an idea?

Julien B

I might have found where the problem comes from, it looks like it is related to the visible property.

I read back the ToolTip documentation several time, then I took time to seek informations in the source code and here what I found out.

QQuickToolTipAttached inherit from QObject and define visible property. Through Q_PROPERTY it use WRITE method QQuickToolTipAttached::setVisible, which call QQuickToolTipAttached::show, which call QQuickToolTip::open.

It is this QQuickToolTip::open method which manage the delay before opening the ToolTip.

While QQuickToolTip inherit from QQuickPopup and do not redefine visible property, so it use QQuickPopup::setVisible which do not call QQuickToolTip::open so there is no delay managed before opening.

It seems to explain the differents behavior for visible property between the standard and attached version.

However does someone know if that is a bug or this is the normal behavior?

Anyway I found a workaround by adding this to my ToolTip:

property bool show
id: toolTip

show: parent.pressed
onShowChanged: {
    if (show)
        toolTip.open();
    else
        toolTip.close();
}

The code below contain standard customized version and attached version and they now work the same way:

Rectangle {
    anchors.fill: parent
    color: "#ff202020"

    Row {
        anchors.centerIn: parent
        spacing: 16

        Button {
            width: 256; height: 64
            //hoverEnabled: true

            contentItem: Text {
                text: "Standard"
                color: parent.pressed ?"#ff202020":"#ffffffff"
                font.pixelSize: 28
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            background: Rectangle {
                color: parent.pressed ? "#ffffffff":"#00000000"
                border.color: "#ffffffff"
                border.width: 2
                anchors.fill: parent
            }

            ToolTip {
                property bool show
                id: toolTip
                delay: 1000
                timeout: 5000

                show: parent.pressed //|| parent.hovered
                onShowChanged: {
                    if (show)
                        toolTip.open();
                    else
                        toolTip.close();
                }

                contentItem: Text {
                    text: qsTr("Customized tool tip link to \"Standard\" button with several lines of text")
                    font.pixelSize: 24
                    wrapMode: Text.WordWrap
                    color: "#ffffff"
                    verticalAlignment: Text.AlignVCenter
                }

                background: Rectangle {
                    implicitHeight: 64
                    radius: 8
                    color: "#ff00b374"
                }
            }
        }

        Button {
            width: 256; height: 64
            //hoverEnabled: true

            contentItem: Text {
                text: "Attached"
                color: parent.pressed ?"#ff202020":"#ffffffff"
                font.pixelSize: 28
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            background: Rectangle {
                color: parent.pressed ? "#ffffffff":"#00000000"
                border.color: "#ffffffff"
                border.width: 2
                anchors.fill: parent
            }

            ToolTip.visible: pressed //|| hovered
            ToolTip.delay: 1000
            ToolTip.timeout: 5000
            ToolTip.text: qsTr("Simple tool tip link to \"Attached\" button with several lines of text")
        }
    }
}

jpnurmi

Hi, this ToolTip bug has been fixed in Qt 5.7.1, which should be released very soon.