QML(24)——提示文本ToolTip的使用_qml如何显示tooltip

效果展示

原理说明

实现提示文本功能，需要设置两个属性。 关键是第二个

ToolTip.text:    // import QtQuick.Controls 2.15
ToolTip.visible:
1
2

如果组件自身含有 hovered 属性（Button），则可以

ToolTip.visible: hovered   //悬停时
1

如果组件自身不含 hovered 属性（Text, Rectangle），则需要利用MouseArea

ToolTip.visible: mousearea.containsMouse
MouseArea {
    id: mousearea1
    anchors.fill: parent
    hoverEnabled: true
}
1
2
3
4
5
6

代码

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ColumnLayout {
    id: root
    property int textSize: 20
    property int componentSize:  30
    spacing: 30

    Button{
        Layout.alignment: Qt.AlignHCenter
        text: "Button"
        font.pixelSize: textSize
        ToolTip.visible: hovered
        ToolTip.text: "This is Button"
    }

    RoundButton {
        Layout.alignment: Qt.AlignHCenter
        icon.width: componentSize
        icon.height: width
        icon.source: "qrc:/resource/volume.png"
        icon.color: "Green"
        ToolTip.text: "This is RoundButton"
        ToolTip.visible: hovered
    }

    Text {
        Layout.alignment: Qt.AlignHCenter
        text: qsTr("Text")
        font.pixelSize: textSize
        ToolTip.text: "This is Text"
        ToolTip.visible: mousearea1.containsMouse
        MouseArea {
            id: mousearea1
            anchors.fill: parent
            hoverEnabled: true
        }
    }

    Label {
        Layout.alignment: Qt.AlignHCenter
        text: "Label"
        font.pixelSize: textSize
        ToolTip.text: "This is Label"
        ToolTip.visible: mousearea2.containsMouse
        MouseArea {
            id: mousearea2
            anchors.fill: parent
            hoverEnabled: true
        }
    }

    Rectangle {
        Layout.alignment: Qt.AlignHCenter
        Layout.fillWidth: true
        Layout.preferredHeight: 40
        color: "green"
        Text {
            anchors.centerIn: parent
            text: qsTr("Rectangle")
            font.pixelSize: textSize
        }
        ToolTip.text:"This is Rectangle"
        ToolTip.visible: mousearea3.containsMouse
        MouseArea {
            id: mousearea3
            anchors.fill: parent
            hoverEnabled: true
        }
    }
}

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74