Qt Quick - ToolTip_qt绘制tooltip控件

一、概述

ToolTip 其实就是ToolTip，所谓ToolTip其实就是一段简短的文本，告知用户控件的功能。它通常置于父控件之上或之下。提示文本可以是任何富文本格式的字符串。这个一般是很细节的东西。

二、附带的ToolTip

ToolTip 为控件设置ToolTip最直接的方法是通过附加属性指定 文本和 可见性。下面的例子演示了鼠标移到按钮里面，这个ToolTip显示的这种方法:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5

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

    Button {
        text: qsTr("保存")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

		//这个 hovered 其实是这个Button的一些属性
        ToolTip.visible: hovered
        ToolTip.text: qsTr("保存这个项目")
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在正常情况下，一次只能看到一个ToolTip。为了节省资源，所有使用ToolTip附加属性的项目共享相同的可视化ToolTip标签实例。这个意思就是说每一个控件都可以设置 ToolTip

尽管视觉效果是共享的，但文本、超时和延迟是单独存储的，每个项目都使用各自的附加属性。但是，多个项目不能使共享ToolTip同时可见。共享ToolTip只显示在使其可见的最后一项上。共享ToolTip的位置由框架决定。

三、延迟和超时

ToolTip通常是短暂的，因为它们是在某个外部事件或用户交互后显示的，通常在某个超时后隐藏。在显示ToolTip时可以控制延迟，在隐藏ToolTip时可以控制超时。这使得实现显示和隐藏ToolTip的不同策略成为可能。
例如，在触摸屏上，按下并按住按钮显示ToolTip是一种常见的模式。下面的示例演示了如何延迟显示ToolTip，直到达到按下并保持的间隔。在这个例子中，按钮一松开，ToolTip就会隐藏。

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.")
  }
1
2
3
4
5
6
7

然而，对于指针设备，可能需要显示一个ToolTip，作为鼠标悬停按钮一段时间的结果。下面的示例演示如何在将按钮悬停一秒钟后显示ToolTip，并在超时五秒钟后隐藏它。

 Button {
      text: qsTr("Button")
      hoverEnabled: true

      ToolTip.delay: 1000
      ToolTip.timeout: 5000
      ToolTip.visible: hovered
      ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")
  }
1
2
3
4
5
6
7
8
9

四、自定义ToolTip

如果需要对ToolTip位置进行更细粒度的控制，或者需要同时创建多个ToolTip实例，也可以创建本地ToolTip实例。这样，就可以自定义ToolTip，并且整个弹出式API都是可用的。下面的示例提供了一个ToolTip，在拖动手柄时显示滑块的值。

  Slider {
      id: slider
      value: 0.5

      ToolTip {
          parent: slider.handle
          visible: slider.pressed
          text: slider.value.toFixed(1)
      }
  }
1
2
3
4
5
6
7
8
9
10

五、定制化

ToolTip可以设置contentItem 和

  ToolTip {
      id: control
      text: qsTr("A descriptive tool tip of what the button does")

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

      background: Rectangle {
          border.color: "#21be2b"
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5

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

    Button {
        id:btn
        text: qsTr("保存")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        ToolTip {
            id: control
            text: qsTr("按钮的描述信息~~")

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

            background: Rectangle {
                border.color: transientParent
            }

            visible: btn.hovered
        }

    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39