Recommended approach for displaying tooltips

cbrake

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?

Thanks,
Cliff

alexander

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

korzhp

look at http://qt.gitorious.org/qt-components

mbrasser

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
        }
    }
}

}
@

Regards,
Michael

anselmolsm

[quote author="korzhp" date="1289378399"]look at http://qt.gitorious.org/qt-components[/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 :-)