当前位置：网站首页>QML控件类型：ToolTip

QML控件类型：ToolTip

2022-07-01 01:13:00 【友善啊，朋友】

一、描述

ToolTip 继承自 Popup，可以为任何控件提供工具提示。工具提示是通知用户控件功能的一小段文本。它通常放置在父控件的上方或下方。提示文本可以是任何富文本格式的字符串。

1.1、附加工具提示

为控件设置工具提示的最直接方法是通过附加属性指定文本和可见性。

Button {
    text: qsTr("Save")

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

1.2、延迟和超时

工具提示通常由于某个外部事件或用户交互而显示的，并且它们通常在某个超时后隐藏。

以下示例演示了如何延迟显示工具提示，且一旦松开按钮，工具提示就会隐藏：

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.")
}

以下示例展示了如何在将按钮悬停一秒后显示工具提示，并在超时五秒后将其隐藏：

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("将按钮悬停一秒钟后会显示此工具提示")
    }
}

1.3、自定义工具提示

以下示例提供了一个工具提示，该工具提示在拖动手柄时显示滑块的值：

Slider
{
    id: slider
    value: 0.5
    width: 150

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

二、自定义ToolTip示例

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"
            }
        }
    }
}