Posted In: QML
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; } }