How I can use tooltip for QML component.
-
[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.0Item {
id: toolTipRoot
width: toolTip.contentWidth
height: toolTipContainer.height
visible: false
clip: false
z: 999999999property 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.
-
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/WikiHelpPS: let Xander decide on his code, since he's the author.
-
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.
-
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 :)
-
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.
-
Thanks, i'll have a look at it.
-
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!
-
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 mainWindowYproperty int xOffset: 20
property int yOffset: 5onEntered: {
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 + 5x: mapToItem(null, mouseX, mouseY).x + mainWindowX + xOffset
y: mapToItem(null, mouseX, mouseY).y + mainWindowY + yOffsetRectangle {
id: frame
width: content.contentWidth + 10 // Padding for text.
height: content.contentHeight + 10color: "#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. -
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.0Label {
property string tooltip: "hello"
MouseArea {
id: behavioranchors.fill: parent
hoverEnabled: trueonExited: 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.
-
I'd love to here your opinion on this approach:
https://www.kullo.net/blog/tooltiparea-the-missing-tooltip-component-of-qt-quick/