Congratulations to our 2022 Qt Champions!

Recommended approach for displaying tooltips

  • Hello,

    I have a QML application with a number of buttons and would like to display a "tooltip" when the mouse is over top the button. What is the recommended way to do this with QML?


  • Are you writing application for desktop platforms? I suppose - one way - writing your own code for this.

  • Hi,

    You should be able to emulate tooltips using the basic QML items. Here's an example -- its not very pretty, and very limited (no delay, only one button, etc), but hopefully it will give you some ideas.

    import QtQuick 1.0

    Rectangle {
    width: 200
    height: 200

    property bool needTooltip: button.hovered
    property real tooltipX: button.x
    property real tooltipY: button.y
    Rectangle {
        id: button
        property bool hovered: ma.containsMouse
        width: 100; height: 100
        anchors.centerIn: parent
        color: "steelblue"
        Text {
            anchors.centerIn: parent
            text: "My Button"
        MouseArea {
            id: ma
            anchors.fill: parent
            hoverEnabled: true
    Rectangle {
        id: tooltip
        width: 75; height: 20
        visible: false
        color: "red"
        Text {
            anchors.centerIn: parent
            text: "My Tooltip"
        states: State {
            name: "inuse"
            when: needTooltip
            PropertyChanges {
                target: tooltip
                visible: true
                x: tooltipX + 12
                y: tooltipY - 30



  • [quote author="korzhp" date="1289378399"]look at[/quote]

    As korzhp said, take a look at Qt-Components. There you'll find a QML implementation of the Mx toolkit; in src/Mx/ you find the implementation of a tooltip. Run examples/mx/test.qml to see it in action in the Mx widgets gallery :-)

Log in to reply