QtQuick ToolTip Component

[toc align_right="yes" depth="3"]

Qt Quick ToolTip component

This article will give you a simple component to use a ToolTip in your QML applications. As you know in first version of Qt Quick Components (the first version has a different name ‘QML Desktop Component 1.0’) has a special component which gives developers to add ToolTip to any components (Rectangle, Item, Label, etc.). But in last version of Qt Quick Controls this component was removed. Really I don’t know why this happened but I think in future releases this small issue will be fix and we all get the nice component which we will use in our projects.

But while this will happen I think the most of you faced with situation when you need to show the information of UI element but can't add the Label because the designer doesn't provide any labels. In some UI component you can use the placeholder (TextField) but in most components you don't have any properties to set a label on a component. In this situation you need to add the label or insert your component to GroupBox which has the title property. But it is not always convenient.

This page is shows you two components which you can use as a ToolTip.

The first sample of ToolTip

The first implementation looks like a standard tooltip and you can create it from JavaScript. The author of this code is "Xander84":http://qt.io/member/7754 This 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). The code looks like:

<br />import QtQuick 2.2

Rectangle {<br /> id: tooltip

property alias text: tooltipText.text<br /> property alias textItem: tooltipText<br /> property int fadeInDelay: 500<br /> property int fadeOutDelay: 500<br /> property bool autoHide: true<br /> property alias autoHideDelay: hideTimer.interval<br /> property bool destroyOnHide: true

function show() {<br /> state = &quot;showing&amp;quot;<br /> if (hideTimer.running) {<br /> hideTimer.restart()<br /> }<br /> }

function hide() {<br /> if (hideTimer.running) {<br /> hideTimer.stop()<br /> }<br /> state = &quot;hidden&amp;quot;<br /> }

width: tooltipText.width + 20<br /> height: tooltipText.height + 10<br /> color: &quot;#dd000000&amp;quot;<br /> radius: 6<br /> opacity: 0

Text {<br /> id: tooltipText<br /> anchors.centerIn: parent<br /> horizontalAlignment: Text.AlignHCenter<br /> color: &quot;white&amp;quot;<br /> font.pointSize: 10<br /> font.bold: true<br /> }

MouseArea {<br /> anchors.fill: parent<br /> onClicked: hide()<br /> }

Timer {<br /> id: hideTimer<br /> interval: 5000<br /> onTriggered: hide()<br /> }

states: [<br /> State {<br /> name: &quot;showing&amp;quot;<br /> PropertyChanges { target: tooltip; opacity: 1 }<br /> onCompleted: {<br /> if (autoHide) {<br /> hideTimer.start()<br /> }<br /> }<br /> },<br /> State {<br /> name: &quot;hidden&amp;quot;<br /> PropertyChanges { target: tooltip; opacity: 0 }<br /> onCompleted: {<br /> if (destroyOnHide) {<br /> tooltip.destroy()<br /> }<br /> }<br /> }<br /> ]

transitions: [<br /> Transition {<br /> to: &quot;showing&amp;quot;<br /> NumberAnimation { target: tooltip; property: &quot;opacity&amp;quot;; duration: fadeInDelay }<br /> },<br /> Transition {<br /> to: &quot;hidden&amp;quot;<br /> NumberAnimation { target: tooltip; property: &quot;opacity&amp;quot;; duration: fadeOutDelay }<br /> }<br /> ]<br />}<br />

Also this component has a simple JavaScript file to make it a little easier to create tooltips. This script looks like (TooltipCreator.js):

<br />var component = Qt.createComponent(&quot;Tooltip.qml&amp;quot;);

function create(text, parent, properties) {<br /> if (typeof properties = &amp;quot;undefined&amp;quot;) &amp;#123;
        properties = &amp;#123;
            anchors: &amp;#123;
                horizontalCenter: parent.horizontalCenter,
                bottom: parent.bottom,
                bottomMargin: parent.height / 8
            &amp;#125;
        &amp;#125;;
    &amp;#125;
    properties.text = text;
    var tooltip = component.createObject(parent, properties);
    if (tooltip = null) {<br /> console.error(&quot;error creating tooltip: &quot; + component.errorString());<br /> } else if (properties.anchors) {<br /> // manual anchor mapping necessary<br /> for (var anchor in properties.anchors) {<br /> tooltip.anchors[anchor] = properties.anchors[anchor];<br /> }<br /> }<br /> return tooltip;<br />}<br />

How to use?

All you need to do is importing the JavaScript file and call a command from it.

<br />import &quot;TooltipCreator.js&amp;quot; as TooltipCreator<br />…<br />TooltipCreator.create(&quot;text on the tooltip&amp;quot;, parentItem).show()<br />

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.

<br />TooltipCreator.create(&quot;absolute positioned tooltip&amp;quot;), rootItem, { x: 100, y: 50 }).show()<br />

or set the properties on the item directly

<br />var tooltip = TooltipCreator.create(qsTr(&quot;Network Error!check your network connection\nor try again later.&quot;), mainView)<br />tooltip.color = &quot;#ddff0000&amp;quot;<br />tooltip.textItem.color = &quot;white&amp;quot;<br />tooltip.show()<br />

The second sample of ToolTip.

The second implementation looks like a label which show near mouse on the component where it need to be shown. The author of this code is "shav":http://qt.io/member/4674 This component has less dynamic properties for the customisation than the first embodiment. The main difference of this implementation in that the label shown near with mouse and if user moving mouse on the component the label moving with mouse. The code looks like (ToolTip.qml):

<br />import QtQuick 2.0<br />import QtQuick.Controls 1.1<br />import QtGraphicalEffects 1.0

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

property alias text: toolTip.text<br /> property alias radius: content.radius<br /> property alias backgroundColor: content.color<br /> property alias textColor: toolTip.color<br /> property alias font: toolTip.font<br /> property var target: null

function onMouseHover(x, y)<br /> {<br /> var obj = toolTipRoot.target.mapToItem(toolTipRoot.parent, x, y);<br /> toolTipRoot.x = obj.x;<br /> toolTipRoot.y = obj.y + 5;<br /> }

function onVisibleStatus(flag)<br /> {<br /> toolTipRoot.visible = flag;<br /> }

Component.onCompleted: {<br /> 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)} onClicked:{parent.focus = true}}',<br /> itemParent, &quot;mouseItem&amp;quot;);<br /> newObject.mouserHover.connect(onMouseHover);<br /> newObject.showChanged.connect(onVisibleStatus);<br /> }

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

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

Text {<br /> id: toolTip<br /> anchors {fill: parent; margins: 5}<br /> wrapMode: Text.WrapAnywhere<br /> }<br /> }<br /> }

DropShadow {<br /> id: toolTipShadow<br /> z: toolTipRoot.z + 1<br /> anchors.fill: source<br /> cached: true<br /> horizontalOffset: 4<br /> verticalOffset: 4<br /> radius: 8.0<br /> samples: 16<br /> color: &quot;#80000000&amp;quot;<br /> smooth: true<br /> source: toolTipContainer<br /> }

Behavior on visible { NumberAnimation { duration: 200 }}<br />}<br />

This component can be created in QML and from JavaScript. You can change a few properties:

• text The text of tooltip.
• radius The corner radius.
• backgroundColor The background color.
• textColor The text color.
• font The font settings to set custom font of text.
• target The component on which need to show tooltip.

How to use?

Create a new item with name ToolTip in component where you want to show tooltip. I recommend to add it to the root component. This component has a default width in 150px. The height will calculate automatically using the text. The simple code to use look like:


ToolTip {
id: tooltip1
width: 200
target: id_of_component
text: "Enter the text here."
}