Written by Bo Thorsen
2015/12/20
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;
}
}