Delay of tooltip dissapear in QML

Question

I'm writing a program where there will be some buttons and tooltips connected with them. I would like the tooltip to disappear with a delay (couple of seconds). I made my own button and my own tooltip in two separate qml files. Tooltip pops up with delay, but I would like it to stay visible for some time and then begin to disappear. Maybe somebody's made something similar. So please, help.

score 2 · Answer 1 · answered Feb 15 '13 at 18:29

IMHO, this may be a cleaner way to implement a tooltip component, though it spans across three files.

TooltipCreator.js

var tool = Qt.createComponent("MyTooltip.qml");
var tooltip;
var fadeInDelay;
var fadeOutDelay;
var tip;
function show() {
    tooltip = tool.createObject(mainWindow);
    tooltip.text = tip;
    tooltip.fadeInDelay = fadeInDelay;
    tooltip.fadeOutDelay = fadeOutDelay;
    tooltip.state = "poppedUp";
}

function close() {
    tooltip.state = "poppedDown";
}

Tooltip.qml

import QtQuick 1.1

import "TooltipCreator.js" as Tooltip

Rectangle {
    width: 360
    height: 360
    id: mainWindow

    Text {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Hover me to bring tooltip!!"
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            Tooltip.fadeInDelay = 500;
            Tooltip.fadeOutDelay = 700;
            Tooltip.tip = "This is tooltip!";
            Tooltip.show();
        }

        onExited: {
            Tooltip.close();
        }
    }
}

MyToolTip.qml

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    id: tooltip
    width: parent.width - 20
    height: tooltipText.height + 10

    property int fadeInDelay
    property int fadeOutDelay
    property alias text: tooltipText.text

    color: "black"
    radius: 6
    anchors.centerIn: parent
    state: ""

    // The object travels from an empty state(on creation) to 'poppedUp' state and then to 'poppedDown' state
    states: [
        State {
            name: "poppedUp"
            PropertyChanges { target: tooltip; opacity: 1 }
        },

        State {
            name: "poppedDown"
            PropertyChanges { target: tooltip; opacity: 0 }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "poppedUp"
            PropertyAnimation { target: tooltip; property: "opacity"; duration: tooltip.fadeInDelay; }
        },

        Transition {
            from: "poppedUp"
            to: "poppedDown"
            PropertyAnimation { target: tooltip; property: "opacity"; duration: tooltip.fadeOutDelay; }
        }
    ]


    Text {
        id: tooltipText
        font.bold: true
        font.pixelSize: 16
        color: "white"
        anchors.centerIn: parent
    }

    onStateChanged: {
        if (tooltip.state == "poppedDown") {
            console.debug("Destroyed!");
            tooltip.destroy(tooltip.fadeOutDelay);
            // If you think that the above line is ugly then, you can destroy the element in onOpacityChanged: if (opacity == 0)
        }
    }
}

score 2 · Answer 2 · answered Feb 11 '14 at 10:54

I just created a simple tooltip system for my project. It's divided into two files. A tooltip will start fading in after a delay, and when the mouse moves away from the tool, the tip disappears after a delay. The part most relevant to your question, is in ToolTipArea.qml

Example usage:

Rectangle{
    width: 50
    height: 50
    color: "#ffaaaa"
    ToolTipArea{
        text: "I am a tool tip"
        hideDelay: 2000 //2s delay before playing fade animation
    }
}

ToolTip.qml

import QtQuick 2.0

Rectangle {
    id:tooltip
    property alias text: textContainer.text
    property int verticalPadding: 1
    property int horizontalPadding: 5
    width: textContainer.width + horizontalPadding * 2
    height: textContainer.height + verticalPadding * 2
    color: "#aa999999"
    Text {
        anchors.centerIn: parent
        id:textContainer
        text: "Gering geding ding ding!"
    }
    NumberAnimation {
        id: fadein
        target: tooltip
        property: "opacity"
        easing.type: Easing.InOutQuad
        duration: 300
        from: 0
        to: 1
    }
    NumberAnimation {
        id: fadeout
        target: tooltip
        property: "opacity"
        easing.type: Easing.InOutQuad
        from: 1
        to: 0
        onStopped: visible = false;
    }
    visible:false
    onVisibleChanged: if(visible)fadein.start();
    function show(){
        visible = true;
        fadein.start();
    }
    function hide(){
        fadeout.start();
    }
}

ToolTipArea.qml

import QtQuick 2.0

MouseArea {
    property alias tip: tip
    property alias text: tip.text
    property alias hideDelay: hideTimer.interval //this makes it easy to have custom hide delays
                                                 //for different tools
    property alias showDelay: showTimer.interval
    id: mouseArea
    anchors.fill: parent
    hoverEnabled: true
    Timer {
        id:showTimer
        interval: 1000
        running: (mouseArea.containsMouse && !tip.visible)
        onTriggered: tip.show();
    }
    //this is the important part!
    Timer {
        id:hideTimer
        interval: 100 //ms before the tip is hidden
        running: !mouseArea.containsMouse && tip.visible
        onTriggered: tip.hide(); //this is the js code that hides the tip.
                                 //you could also use visible=false; if you
                                 //don't need animations
    }
    ToolTip{
        id:tip
    }
}

I created a tiny repo on github: https://github.com/bobbaluba/qmltooltip

score 1 · Answer 3 · answered Feb 14 '13 at 18:54

I don't know how your tooltips are implemented. If you create them statically in your QML code and just show and hide them, something like this this might do it:

MyToolTip {
    // [...]

    function show() {
        parent.visible = true // show tooltip
        hidingTimer.start()   // start timer when tooltip is shown
    }

    Timer {
        id: hidingTimer
        interval: 5000  // hide after 5s
        onTriggered: {
            parent.visible = false  // make tooltip invisible
            stop()                  // stop timer
        }
    }
}

If you instantiate tooltips dynamically you can do something like this:

MyToolTip {
    // [...]

    Timer {  // timer is started when object is created
        interval: 5000; running: true
        onTriggered: {
            parent.destroy()  // automatically destroy tooltip object
        }
    }
}

score 1 · Answer 4 · answered Feb 14 '13 at 19:34

It sounds like you might want the tooltips to fade out. In which case you may want to refer to using Property Animations to dynamically adjust the opacity of your tooltips over time. Personally I would do this with transitions on your tooltips that execute the animations when your state changes to hidden. Then just set the state when you want them to be hidden. link

Delay of tooltip dissapear in QML

4 Answers4

Example usage:

ToolTip.qml

ToolTipArea.qml

Linked