当前位置：网站首页>QML control type: tooltip

QML control type: tooltip

2022-07-01 01:51:00 【Friendly, friend】

One 、 describe

ToolTip Inherited from Popup, You can provide tooltips for any control . A tooltip is a short piece of text that informs the user of the control's functionality . It is usually placed above or below the parent control . The prompt text can be any rich text string .

1.1、 Additional tooltips

The most direct way to set tooltips for controls is to specify text and visibility through additional properties .

Button {
    text: qsTr("Save")

    ToolTip.visible: down
    ToolTip.text: qsTr("Save the active project")
}

1.2、 Delays and timeouts

Tooltips are usually displayed due to an external event or user interaction , And they are usually hidden after a timeout .

The following example demonstrates how to delay the display of tooltips , And once the button is released , Tooltips will be hidden ：

Button {
    text: qsTr("Button")

    ToolTip.visible: pressed
    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
    ToolTip.text: qsTr("This tool tip is shown after pressing and holding the button down.")
}

The following example shows how to display a tooltip after hovering a button for one second , And hide it after five seconds ：

import QtQuick
import QtQuick.Controls

Window
{
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Button
    {
        text: qsTr("Button")

        hoverEnabled: true

        ToolTip.delay: 1000
        ToolTip.timeout: 5000
        ToolTip.visible: hovered
        ToolTip.text: qsTr(" This tooltip appears after hovering the button for one second ")
    }
}

1.3、 Custom tool tips

The following example provides a tooltip , The tooltip displays the value of the slider as you drag the handle ：

Slider
{
    id: slider
    value: 0.5
    width: 150

    ToolTip {
        parent: slider.handle
        visible: slider.pressed
        text: slider.value.toFixed(1)
    }
}

Two 、 Customize ToolTip Example

import QtQuick
import QtQuick.Controls

Window
{
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Button
    {
        id:btn
        text: qsTr("Button")
        hoverEnabled: true

        ToolTip {
            id: control
            text: qsTr("A descriptive tool tip of what the button does")
            delay: 1000
            timeout: 5000
            visible: btn.hovered

            contentItem: Text {
                text: control.text
                font: control.font
                color: "#21be2b"
            }

            background: Rectangle {
                border.color: "#129bf1"
            }
        }
    }
}