How I can use tooltip for QML component.

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.

Eddy

bq. I want to do it but I don’t know how I can do it. Could you help me with it.

Have a look at :
"How to add wiki pages":http://qt-project.org/wiki/WikiHelp

PS: let Xander decide on his code, since he's the author.

shav

Thanks for the link to documentation. I'll check it.

[quote author="Eddy" date="1396263262"]PS: let Xander decide on his code, since he's the author.[/quote]

Sure, I'll wait the Xander answer.

Xander84

hey, sure you can post it on the wiki if you like, feel free to use the code.

maybe I will release some more QML code or apps in the future, actually I just started using QML some month ago and released my first app a week ago, if anybody is interested how it looks on Android: https://play.google.com/store/apps/details?id=ws.aggregator.critiq

and thanks Eddy, I like to contribute to the community :)

shav

Hi,

I've created the wiki page "QtQuick_ToolTip_Component":http://qt-project.org/wiki/QtQuick_ToolTip_Component So please read this and if you found any mistakes let me know by email.

Thanks for the help.

Eddy

@shav

Thanks, i'll have a look at it.

Eddy

@xander

bq. actually I just started using QML some month ago and released my first app a week ago, if anybody is interested how it looks on Android: https://play.google.com/store/apps/details?id=ws.aggregator.critiq

looks very nice, cool color choice!

Timmmm

I took a different approach and tried creating an actual tooltip window. It works pretty well but there are some flaws. See the code:
@
import QtQuick 2.2
import QtQuick.Window 2.1
import QtGraphicalEffects 1.0

// Simple tooltip. There are some flaws:

// 1. When the tooltip is shown the main window loses focus! There's no way around that currently.
// 2. Each tooltip has its own window - so if your app has 100 tooltips there will always be
// 100 (hidden) windows open. Probably not great for performance.
// 3. You need to provide it with your main window coordinates via mainWindowX and mainWindowY.
// this is because there is no way to get screen coordinates in QML currently.

MouseArea {

hoverEnabled: true

property alias text: content.text

// You must alias these to the main window positions.
property int mainWindowX
property int mainWindowY

property int xOffset: 20
property int yOffset: 5

onEntered: {
window.visible = true;
}

onExited: {
window.visible = false;
}

Window {
id: window
flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground | Qt.WindowDoesNotAcceptFocus
color: "#00000000"

width: frame.width + 5 // Space for drop shadow.
height: frame.height + 5

x: mapToItem(null, mouseX, mouseY).x + mainWindowX + xOffset
y: mapToItem(null, mouseX, mouseY).y + mainWindowY + yOffset

Rectangle {
id: frame
width: content.contentWidth + 10 // Padding for text.
height: content.contentHeight + 10

color: "#f3f2a5"
border.width: 1
border.color: "#bebebe"

Text {
id: content
anchors.centerIn: parent
}
}
DropShadow {
anchors.fill: frame
horizontalOffset: 3
verticalOffset: 3
radius: 5
samples: 16
color: "#80000000"
source: frame
cached: true
fast: true // This looks better for some reason.
transparentBorder: true // Required. But there's no documentation so I don't know why.
}
}
}
@
QML is not mature enough to do this in a bug-free way yet. If you want it to work well you will have to write a C++ component, which is not too difficult. However, I'm reasonably happy with the above code so I'll wait until the trolls write an official implementation I think.

Aralox

Hey guys,
I was happy enough with the tooltip that came with "Button.qml":http://qt-project.org/doc/qt-5/qml-qtquick-controls-button.html#tooltip-prop, so I extracted the relevant parts from its source code (located in C:\Qt\5.3\msvc2013_64\qml\QtQuick\Controls\Private for me) and used it, instead of a custom solution.

Here is a minimal example:

@ import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1
import QtQuick.Controls.Private 1.0

Label {

property string tooltip: "hello"

MouseArea {
id: behavior

anchors.fill: parent
hoverEnabled: true

onExited: Tooltip.hideText()
onCanceled: Tooltip.hideText()

Timer {
interval: 1000
running: behavior.containsMouse && tooltip.length
onTriggered: Tooltip.showText(behavior, Qt.point(behavior.mouseX, behavior.mouseY), tooltip)
}
}

}@

I did like the solutions by shav and Xander, but didn't really want to roll a custom solution unless I really needed to.

webmaster128

I'd love to here your opinion on this approach:

https://www.kullo.net/blog/tooltiparea-the-missing-tooltip-component-of-qt-quick/