描述:ToolTip是用来描述控件信息的一小段文本,通常位控件之上或之下。提示文本可以是任何富文本信息。
1、使用附加属性设置控件ToolTip
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button {
id: btn
text: qsTr("Button Info")
anchors.centerIn: parent
ToolTip {
delay: 500 //tooltip 500ms后出现
timeout: 5000 //tooltip 5s后自动消失
visible: btn.hovered //鼠标进入button中
text: qsTr("This tool tip is text detailed info.")
}
}
}
2、自定义ToolTip
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Text {
id: btn
text: qsTr("Text Info")
anchors.centerIn: parent
TextArea{
id: textInfoArea
anchors.fill: parent
}
ToolTip{
delay: 500
timeout: 5000
visible: textInfoArea.hovered
contentItem: Text{
text: qsTr("This tool tip is text detailed info.")
font.pixelSize: 16
font.bold: true
color: "green"
}
background: Rectangle {
border.color: "green"
radius: 4
}
}
}
}
3、只有折叠或省略的文本显示详情
MyCommonText.qml
import QtQuick 2.0
Text {
property var fontSize: 14
property var fontFamliy: localFont.name
property var fontColor: "#DDDDDD"
property var bkColor: Qt.rgba(28/255, 30/255, 35/255, 0.85)
property var hAlit: Text.AlignLeft
property var vAlit: Text.AlignVCenter
horizontalAlignment: hAlit
verticalAlignment: vAlit
elide: Text.ElideRight //不换行,超出部分省略
font.family: fontFamliy
font.pixelSize: fontSize
color: fontColor
MouseArea{
id: textInfoArea
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true //鼠标事件继续下传到父控件
onClicked: {
mouse.accepted = false //不阻截鼠标
}
onCanceled: {
mouse.accepted = false //不阻截鼠标
}
onDoubleClicked:{
mouse.accepted = false //不阻截鼠标
}
onPositionChanged:{
mouse.accepted = false //不阻//不阻截鼠标
}
onPressAndHold:{
mouse.accepted = false //不阻截鼠标
}
onPressed:{
mouse.accepted = false //不阻截鼠标
}
onReleased:{
mouse.accepted = false //不阻截鼠标
}
}
MyTextDetial {
anchors.fill: parent
fullText: parent.text
showDetial: truncated && textInfoArea.containsMouse
}
}
//MyTextDetial.qml
import QtQuick 2.0
import QtQuick.Controls 2.12
Item{
property var fullText: qsTr("textDetial")
property var fontSize: 14
property var fontFamliy: localFont.name
property var fontColor: "#DDDDDD"
property var bkColor: Qt.rgba(28/255, 30/255, 35/255, 0.85)
property bool showDetial: false
ToolTip{
delay: 0 //立即出现出现tooltip
//timeout: 5000 //5s后消失
visible: showDetial
contentItem: Text{
text: fullText
font.pixelSize: fontSize
font.family: fontFamliy
font.bold: true
color: fontColor
}
background: Rectangle {
color: bkColor
}
}
}