How I can use tooltip for QML component.

shav

Hi everyone!

How I can use tooltip for all QtQuick Components. As I know I can use tooltip only for 'Button'. How I can add a tooltip for Label?

Thanks for the any help.

Eddy

hi,

I didn't try it myself yet, but AFAIK that should be possible.

Did you try to use it like this?
@
Label {
id: lab
anchors.centerIn: parent
width: 100
height: 50

     ToolTip {
         id: toolTip
         text: "ToolTip"
         target: lab
         visible: mouseArea.pressed
     }

     MouseArea {
         id: mouseArea
         anchors.fill: parent
     }
 }

@

shav

Hi,

Yes, I have tried this but in Qt 5.3.0 (beta) this component doesn't supported. When I tried it I've received this error: 'ToolTip is not a type'

Eddy

I tested it myself on Qt 5.2.1.

I get the same error.

You can check on "JIRA":https://bugreports.qt-project.org/secure/Dashboard.jspa for a reported bug and a possible work around. In case you cannot find anything reported there yet, please file a bug report.

Please make in link in JIRA to this post and make a tag here with the bug report number.

Xander84

Hi, just wondering since when is there a ToolTip QML object? I don't see any in the documentation so no wonder you are getting errors!? Or am I missing something here? lol
http://qt-project.org/doc/qt-5/qmltypes.html#t (no tooltip, also in my latest Qt version 5.2.1 in QtCreator shows nothing just QToolTip widget).

Eddy

@Xander.

You're right.

Here is the link
"QML Tooltip...":http://doc.qt.digia.com/qtquick-components-symbian-1.1/qml-tooltip.html

After some more investigating seems it is part of Qt Quick Components for symbian / harmattan.

My mistake, but on the other hand worth having a look at the sources

shav

Hi everyone!

I still can't find the solution for my problem with tooltip and I've posted the bugreport to "JIRA":https://bugreports.qt-project.org/browse/QTBUG-37968.

If someone found the solution please post it here.

Thanks for the help!

Eddy

Hi shaw,

Did you see my previous post?
Qt quick components are only available for symbian / harmattan on Qt4.
You can't use them directly with Qt5 .
On the other hand, looking at the sources can help you implementing your own.

shav

[quote author="Eddy" date="1396165453"]Hi shaw,

Did you see my previous post?
Qt quick components are only available for symbian / harmattan on Qt4.
You can't use them directly with Qt5 .
On the other hand, looking at the sources can help you implementing your own.
[/quote]

Thanks for the reply but I can use the QtQuick Components in my Qt projects. You can use it too if you add to your QML files next lines of code:
@
import QtQuick 2.2
import QtQuick.Controls 1.2 //QtQuick Components
import QtQuick.Dialogs 1.1 //Dialogs
import QtQuick.Window 2.0 //Windows
@

But I can't use ToolTip component because the current version of QtQuick doesn't supported it. And you are right I can use my own component for show tooltip and I done this for now. But I think in future release of Qt will be grade to see this component.

Eddy

bq. But I think in future release of Qt will be great to see this component.

Yes there was a lot of interesting stuff in there.
I think others could be interested in your Tooltip solution. Maybe you could post it here or even make a wiki about it? Thanks.

shav

[quote author="Eddy" date="1396168836"]bq. But I think in future release of Qt will be great to see this component.

Yes there was a lot of interesting stuff in there.
I think others could be interested in your Tooltip solution. Maybe you could post it here or even make a wiki about it? Thanks.[/quote]

Hi,

I want to share my implementation of ToolTip component. This varian doesn't apply to the best implementation but I think for the begin of the tooltip this is a nice solution for me. The code of ToolTip component looks like:
@
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtGraphicalEffects 1.0

Item {
id: toolTipRoot
height: toolTipContainer.height
visible: false
clip: false
z: 999999999

property alias text: toolTip.text
property alias backgroundColor: content.color
property alias textColor: toolTip.color
property alias font: toolTip.font

function onMouseHover(x, y)
{
    toolTipRoot.x = x;
    toolTipRoot.y = y + 5;
}

function onVisibleStatus(flag)
{
    toolTipRoot.visible = flag;
}

Component.onCompleted: {
    var newObject = Qt.createQmlObject('import QtQuick 2.0; MouseArea {signal mouserHover(int x, int y); signal showChanged(bool flag); anchors.fill:parent; hoverEnabled: true; onPositionChanged: {mouserHover(mouseX, mouseY)} onEntered: {showChanged(true)} onExited:{showChanged(false)}}',
        toolTipRoot.parent, "mouseItem");
    newObject.mouserHover.connect(onMouseHover);
    newObject.showChanged.connect(onVisibleStatus);
}

Item {
    id: toolTipContainer
    width: content.width + toolTipShadow.radius
    height: content.height + toolTipShadow.radius

    Rectangle {
        id: content
        width: toolTipRoot.width
        height: toolTip.contentHeight + 10
        radius: 10

        Text {
            id: toolTip
            anchors {fill: parent; margins: 5}
            wrapMode: Text.WrapAnywhere
        }
    }
}

DropShadow {
    id: toolTipShadow
    z: toolTipRoot.z
    anchors.fill: source
    cached: true
    horizontalOffset: 4
    verticalOffset: 4
    radius: 8.0
    samples: 16
    color: "#80000000"
    smooth: true
    source: toolTipContainer
}

}
@

The code to use it looks like:
@
ToolTip {
id: tooltip
width: 300 //default width is 150px. and height is calculate automatically using the text size.
backgroundColor: "yellow" //set the background color
textColor: "blue" //set the text colour
font.pointSize: 18 //You can use all font settings to set custom font.
text: "Some <b>text</b> <i>here</i>"; //You can use HTML tags in text.
}
@

But Now I have a problem with z-index of tooltip component. I try to understand why z index in my component is not work correctly. If tooltip will show on the login form where both textfields looks like a group you can see the second textfield is overlaps my tooltip. If you optimised this component please post your version here.

Thanks for the help!

Eddy

Hi,

Thanks for sharing.

When you use your tooltip , do you put it as the last part of your dialog?

shav

[quote author="Eddy" date="1396200453"]Hi,

Thanks for sharing.

When you use your tooltip , do you put it as the last part of your dialog? [/quote]

No, I use it as a part of TextField. Here's how looks like the code of my login dialog (full source code):
@
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import com.shav.qtforum 1.0
import "../"

Window {
id: userLoginWindow
width: 400
height: 150
minimumWidth: 400
maximumWidth: 400
minimumHeight: 150
maximumHeight: 150
modality: Qt.WindowModal
title: "Login"
color: "#e8e8e8"

property var rootApp: null

signal userIsLogIn()

function onUserLoginStatus(status)
{
    spinner.running = false;

    if(status === true)
    {
        userLoginWindow.userIsLogIn();
        userLoginWindow.close();
    }
}

Component.onCompleted: {
    if(rootApp !== null && rootApp.manager !== null)
    {
        rootApp.manager.userDidLogin.connect(onUserLoginStatus);
    }
}

Rectangle {
    id: contentView
    anchors {fill: parent; margins: 10}
    color: "transparent"
    clip: true

    BusyIndicator {
        id: spinner
        running: false
        anchors {left: parent.left; bottom: parent.bottom}
        width: 30
        height: 30
    }

    Rectangle {
        id: userLoginSettings
        width: parent.width
        height: parent.height - buttonsRow.height - 10
        color: "transparent"
        clip: true

        Column {
            id: settingsColumn
            width: parent.width
            height: parent.height
            spacing: 5

            Row {
                id: userNameRow
                width: parent.width
                height: userNameField.height
                spacing: 20

                Label {
                    id: userNameLabel
                    width: 100
                    height: parent.height
                    verticalAlignment: Qt.AlignVCenter
                    text: "Username: "
                }

                TextField {
                    id: userNameField
                    width: parent.width - userNameLabel.width - 20
                    placeholderText: "Your login name here..."

                    ToolTip {
                        id: tooltip
                        width: 300
                        backgroundColor: "yellow"
                        textColor: "blue"
                        font.pointSize: 18
                        text: "Some <b>text</b> <i>here</i>";
                    }
                }
            }

            Row {
                id: userPasswordRow
                width: parent.width
                height: userPasswordField.height
                spacing: 20

                Label {
                    id: userPasswordLabel
                    width: 100
                    height: parent.height
                    verticalAlignment: Qt.AlignVCenter
                    text: "Password: "
                }

                TextField {
                    id: userPasswordField
                    width: parent.width - userPasswordLabel.width - 20
                    echoMode: TextInput.Password
                    placeholderText: "Your password here..."
                }
            }

            CheckBox {
                id: savePassword
                checked: true
                text: "Keep me logged in for two weeks"
            }
        }
    }

    Row {
        id: buttonsRow
        width: btnClose.width + btnRegister.width + btnLogin.width
        height: btnClose.height
        anchors {right: parent.right; top: userLoginSettings.bottom; topMargin: 10}

        Button {
            id: btnClose
            text: "Close"
            onClicked: {
                userLoginWindow.close();
            }
        }

        Button {
            id: btnRegister
            text: "Sign Up"
            onClicked: {
                if(rootApp !== null && rootApp.manager !== null)
                {
                    rootApp.manager.getRegistrationHiddenFields();
                    userLoginWindow.close();
                }
            }
        }

        Button {
            id: btnLogin
            isDefault: true
            text: "Login"
            onClicked: {

                if(userNameField.text.length > 0 && userPasswordField.text.length > 0)
                {
                    if(rootApp !== null && rootApp.manager !== null)
                    {
                        spinner.running = true;
                        userLoginWindow.userIsLogIn();
                        rootApp.manager.login(userNameField.text, userPasswordField.text, savePassword.checked);
                    }
                }
            }
        }
    }
}

}
@

Xander84

The z-index only works for sibling items and the parent, not other items deeper in the item tree and siblings of the parent are not affected by it (sadly), that is why it doesn't work in your code.

shav

[quote author="Xander84" date="1396201249"]The z-index only works for sibling items and the parent, not other items deeper in the item tree and siblings of the parent are not affected by it (sadly), that is why it doesn't work in your code.[/quote]

Thanks for the reply! Well I'll try to fix it and upload a new version here tomorrow.

Xander84

I could publish my Tooltip version later, it a little bit different :D

shav

It's will be grade!

Xander84

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");

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.

Eddy

Thanks for sharing Xander!

Are you interested in putting it in a wiki page ?

We can help you with that if you haven't done it yet. Just let us know.

BTW : thanks for all your contributions on Devnet. We are really happy having you on board!!!

shav

[quote author="Eddy" date="1396255883"]
Are you interested in putting it in a wiki page ?
[/quote]

Hi,

I want to do it but I don't know how I can do it. Could you help me with it. I want to create two version of ToolTip. The one is from the Xander84 and one is a my if you don't mind.

The new version of my ToolTip looks like:
@
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtGraphicalEffects 1.0

Item {
id: toolTipRoot
width: toolTip.contentWidth
height: toolTipContainer.height
visible: false
clip: false
z: 999999999

property alias text: toolTip.text
property alias radius: content.radius
property alias backgroundColor: content.color
property alias textColor: toolTip.color
property alias font: toolTip.font
property var target: null

function onMouseHover(x, y)
{
    var obj = toolTipRoot.target.mapToItem(null, x, y);
    toolTipRoot.x = obj.x;
    toolTipRoot.y = obj.y;
}

function onVisibleStatus(flag)
{
    toolTipRoot.visible = flag;
}

Component.onCompleted: {
    var itemParent = toolTipRoot.target;

    var newObject = Qt.createQmlObject('import QtQuick 2.0; MouseArea {signal mouserHover(int x, int y); signal showChanged(bool flag); anchors.fill:parent; hoverEnabled: true; onPositionChanged: {mouserHover(mouseX, mouseY)} onEntered: {showChanged(true)} onExited:{showChanged(false)}}',
        itemParent, "mouseItem");
    newObject.mouserHover.connect(onMouseHover);
    newObject.showChanged.connect(onVisibleStatus);
}

Item {
    id: toolTipContainer
    z: toolTipRoot.z + 1
    width: content.width + (2*toolTipShadow.radius)
    height: content.height + (2*toolTipShadow.radius)

    Rectangle {
        id: content
        anchors.centerIn: parent
        width: toolTipRoot.width
        height: toolTip.contentHeight + 10
        radius: 3

        Text {
            id: toolTip
            anchors {fill: parent; margins: 5}
            wrapMode: Text.WrapAnywhere
        }
    }
}

DropShadow {
    id: toolTipShadow
    z: toolTipRoot.z + 1
    anchors.fill: source
    cached: true
    horizontalOffset: 4
    verticalOffset: 4
    radius: 8.0
    samples: 16
    color: "#80000000"
    smooth: true
    source: toolTipContainer
}

Behavior on visible { NumberAnimation { duration: 200 }}

}
@

I think the Xander84 version looks more standard. And I think it's will be great if other developers could have a more variants of implementation the tooltip.

[quote author="Eddy" date="1396255883"]
BTW : thanks for all your contributions on Devnet. We are really happy having you on board!!![/quote]

Thanks! I'm happy be with you on board. I'll want to thank you for your hard work on Qt.