TooltipArea – the missing tooltip component of Qt Quick

Missing support for tooltips is one of the main problems when using Qt Quick to build native desktop software as discussed at other places. Qt targeted the issue by defining a tooltip property for Buttons in Qt Quick Controls, which works great but only on Buttons. Users asked to make the tooltip publicly available for other components – one year ago. But also in the coming Qt 5.5 it will not be present.

Fortunately the tooltip from Button can be borrowed easily. In contrast to other user created tooltip implementations this has the advantage that tooltips’ appearance is consistent no matter whether they are from a Button or a custom component. They will adapt the operating system’s style as much as Button.tooltip does and evolve with it.

Example usage

Add additional mouseover information to a Text:

Text {
    text: "10:28 am"

    TooltipArea {
        text: "Monday, 6th May 2015 10:28:03 am"
    }
}

Explain an image or icon:

Image {
    width: 20
    height: 20
    source: "red_dot.png"

    TooltipArea {
        text: "An error occurred"
    }
}

Code

TooltipArea.qml:

import QtQuick 2.4
import QtQuick.Controls.Private 1.0

// TooltipArea.qml
// This file contains private Qt Quick modules that might change in future versions of Qt
// Tested on: Qt 5.4.1

MouseArea {
    id: _root
    property string text: ""

    anchors.fill: parent
    hoverEnabled: _root.enabled

    onExited: Tooltip.hideText()
    onCanceled: Tooltip.hideText()

    Timer {
        interval: 1000
        running: _root.enabled && _root.containsMouse && _root.text.length
        onTriggered: Tooltip.showText(_root, Qt.point(_root.mouseX, _root.mouseY), _root.text)
    }
}

This component uses the private component  QtQuick.Controls.Private/Tooltip. This component is not documented and not intended to be used by Qt users since it might change in any Qt release. So you have to double check functionality when you or your users update Qt. I tested the snipped on Qt 5.4.1 only.

Is this the solution to the missing tooltip in Qt Quick? Let me know in the comments!

2 thoughts on “TooltipArea – the missing tooltip component of Qt Quick

  1. For CheckBoxes, and maybe other buttons, convert mousearea”click” event into “pressed” state change of parent checkbox, as follows:

    MouseArea {
    id: _root
    property string text: “”

    anchors.fill: parent
    hoverEnabled: _root.enabled

    onExited: Tooltip.hideText()
    onCanceled: Tooltip.hideText()
    onClicked: {
    if (typeof(_root.parent.pressed) !== ‘undefined’)
    _root.parent.pressed = !_root.parent.pressed
    }
    Timer {
    interval: 1000
    running: _root.enabled && _root.containsMouse && _root.text.length
    onTriggered: Tooltip.showText(_root, Qt.point(_root.mouseX, _root.mouseY), _root.text)
    }
    }

  2. Adding this to MouseArea might improve behavior:

    propagateComposedEvents: true

    onClicked: mouse.accepted = false;
    onPressed: mouse.accepted = false;
    onReleased: mouse.accepted = false;
    onDoubleClicked: mouse.accepted = false;
    onPositionChanged: mouse.accepted = false;
    onPressAndHold: mouse.accepted = false;

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.