Implementing tool tips in QML

Written by Bo Thorsen
2016/10/03

If you are using the Qt Components, you have tool tips available. But with the standard SDK, you’re on your own. Here, I’ll implement a simple tool tip component for you.

In my application, I have a lot of Text objects that have the same font, color etc. so I have put those in a TTText.qml. In this, I also have the tool tip property, which is the only thing I will show here:

import QtQuick 1.0
Text {
    property string toolTip
    // ...
    ToolTip { toolTip: parent.toolTip }
}

The idea here is simply to have a toolTip property directly on the TTText object. I could have chosen to use it with myText.toolTip.text instead, but by using a property directly on the Text object, I have encapsulated the tool tip inside it.

First attempt at a ToolTip.qml is a very simple one:

import QtQuick 1.0
Item {
    anchors.fill: parent
    property string toolTip
    property bool showToolTip: false
    Rectangle {
        id: toolTipRectangle
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.bottom
        width: toolTipText.width + 4
        height: toolTipText.height + 4
        z: 200
        visible: toolTip != "" && showToolTip
        color: "#ffffaa"
        border.color: "#0a0a0a"
        Text {
            id: toolTipText
            text: toolTip
            color: "black"
            anchors.centerIn: parent
        }
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onEntered: showToolTip = true
        onExited: showToolTip = false
        hoverEnabled: true
    }
}

The MouseArea is the first piece needed. This is the part that tells when the user hovers the mouse over the text. When this is the case, it sets the showToolTip to true, which the tool tip rectangle uses to know when it should show itself.

This is actually enough to have working tool tips on your items. But it’s a bit rough: It just goes visible as soon as the mouse enters the item holding the ToolTip.

First thing I want to add is a fade in and fade out. I do this by changing the viewing of the tool tip from using the visible property to the opacity and do an animation on the property changes.

The second thing is that I want the tool tip to wait a bit before it pops up, so it doesn’t show itself when I just move the mouse over the holding item. This is done with a timer that is started by the MouseArea enter event. When the timer fires, it sets the opacity to 1.

With these two changes we have a nice and usable tool tip item. If you want to, you can add properties to change the way the tool tip looks, the timer duration or the animation duration etc.

Here is the final version:

import QtQuick 1.0
Item {
    anchors.fill: parent
    property string toolTip
    property bool showToolTip: false
    Rectangle {
        id: toolTipRectangle
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.bottom
        width: toolTipText.width + 4
        height: toolTipText.height + 4
        z: 200
        opacity: toolTip != "" && showToolTip ? 1 : 0
        color: "#ffffaa"
        border.color: "#0a0a0a"
        Text {
            id: toolTipText
            text: toolTip
            color: "black"
            anchors.centerIn: parent
        }
        Behavior on opacity {
            PropertyAnimation {
                easing.type: Easing.InOutQuad
                duration: 250
            }
        }
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onEntered: showTimer.start()
        onExited: { showToolTip = false; showTimer.stop(); }
        hoverEnabled: true
    }
    Timer {
        id: showTimer
        interval: 250
        onTriggered: showToolTip = true;
    }
}