QtQuick ToolTip Component
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 [qt.io] 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:
Also this component has a simple JavaScript file to make it a little easier to create tooltips. This script looks like (TooltipCreator.js):
How to use?
All you need to do is importing the JavaScript file and call a command from it.
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.
or set the properties on the item directly
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 [qt.io] 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):
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: