How I can use tooltip for QML component.

[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/