 <p>Maybe something like this..</p> <p>This is for InfoBanner.qml</p> <pre><code>import QtQuick 2.2 Loader { id: messages function displayMessage(message) { messages.source = ""; messages.source = Qt.resolvedUrl("InfoBannerComponent.qml"); messages.item.message = message; } width: parent.width anchors.bottom: parent.top z: 1 onLoaded: { messages.item.state = "portrait"; timer.running = true messages.state = "show" } Timer { id: timer interval: 2500 onTriggered: { messages.state = "" } } states: [ State { name: "show" AnchorChanges { target: messages; anchors { bottom: undefined; top: parent.top } } PropertyChanges { target: messages; anchors.topMargin: 100 } } ] transitions: Transition { AnchorAnimation { easing.type: Easing.OutQuart; duration: 300 } } } </code></pre> <p>This is for InfoBannerComponent.qml</p> <pre><code>import QtQuick 2.2 Item { id: banner property alias message : messageText.text height: 70 Rectangle { id: background anchors.fill: banner color: "darkblue" smooth: true opacity: 0.8 } Text { font.pixelSize: 24 renderType: Text.QtRendering width: 150 height: 40 id: messageText anchors.fill: banner horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap color: "white" } states: State { name: "portrait" PropertyChanges { target: banner; height: 100 } } MouseArea { anchors.fill: parent onClicked: { messages.state = "" } } } </code></pre> <p>This is for main.qml</p> <pre><code>import QtQuick 2.3 import QtQuick.Window 2.2 Window { visible: true width: 360 height: 360 MouseArea { anchors.fill: parent onClicked: { Qt.quit(); } } Text { text: qsTr("Hello World") anchors.centerIn: parent } InfoBanner { id: messages } Component.onCompleted: messages.displayMessage("Hello World"); } </code></pre> <p>credit to marxian at marxoft dot co dot uk</p>