Ok here you go, maybe that is useful for someone.
I’ve created a more dynamic tooltip, so usually they are created from JavaScript and not included in the QML layout directly (but can also be done if needed).
Tooltip.qml:
import QtQuick 2.2
Rectangle {
id: tooltip
property alias text: tooltipText.text
property alias textItem: tooltipText
property int fadeInDelay: 500
property int fadeOutDelay: 500
property bool autoHide: true
property alias autoHideDelay: hideTimer.interval
property bool destroyOnHide: true
function show() {
state = "showing"
if (hideTimer.running) {
hideTimer.restart()
}
}
function hide() {
if (hideTimer.running) {
hideTimer.stop()
}
state = "hidden"
}
width: tooltipText.width + 20
height: tooltipText.height + 10
color: "#dd000000"
radius: 6
opacity: 0
Text {
id: tooltipText
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
color: "white"
font.pointSize: 10
font.bold: true
}
MouseArea {
anchors.fill: parent
onClicked: hide()
}
Timer {
id: hideTimer
interval: 5000
onTriggered: hide()
}
states: [
State {
name: "showing"
PropertyChanges { target: tooltip; opacity: 1 }
onCompleted: {
if (autoHide) {
hideTimer.start()
}
}
},
State {
name: "hidden"
PropertyChanges { target: tooltip; opacity: 0 }
onCompleted: {
if (destroyOnHide) {
tooltip.destroy()
}
}
}
]
transitions: [
Transition {
to: "showing"
NumberAnimation { target: tooltip; property: "opacity"; duration: fadeInDelay }
},
Transition {
to: "hidden"
NumberAnimation { target: tooltip; property: "opacity"; duration: fadeOutDelay }
}
]
}
The tooltip has a show and hide function to fade it in and out respectively, by default it will destroy itself after it’s hidden (the destroyOnHide property can be set to false if you don’t want that).
Also I have a simple JavaScript file to make it a little easier to create tooltips.
TooltipCreator.js
var component = Qt.createComponent("Tooltip.qml");
function create(text, parent, properties) {
if (typeof properties === "undefined") {
properties = {
anchors: {
horizontalCenter: parent.horizontalCenter,
bottom: parent.bottom,
bottomMargin: parent.height / 8
}
};
}
properties.text = text;
var tooltip = component.createObject(parent, properties);
if (tooltip === null) {
console.error("error creating tooltip: " + component.errorString());
} else if (properties.anchors) {
// manual anchor mapping necessary
for (var anchor in properties.anchors) {
tooltip.anchors[anchor] = properties.anchors[anchor];
}
}
return tooltip;
}
manual anchor mapping was necessary because it didn’t work with Component.createObject properties!? I don’t know if that is a bug or an error on my side.
so I use that TooltipCreator like this for example:
import "TooltipCreator.js" as TooltipCreator
...
TooltipCreator.create("text on the tooltip", parentItem).show()
by default it will fade in, stay visible for 5 seconds and than fade out and destroy itself, the user can click on the tooltip to hide it immediately, also it will be anchored at the bottom center of the provided parent Item (see the TooltipCreator.js)
The 3rd optional argument can be used to specify custom properties for the tooltip, e.g.
TooltipCreator.create("absolute positioned tooltip"), rootItem, { x: 100, y: 50 }).show()
or set the properties on the item directly
var tooltip = TooltipCreator.create(qsTr("Network Error!\nPlease check your network connection\nor try again later."), mainView)
tooltip.color = "#ddff0000"
tooltip.textItem.color = "white"
tooltip.show()
I hope that helps, it’s not perfect but an easy way to show a simple tooltip I think.
↧