QML组件---ToolTip自定义文本详情_qml tooltip

描述：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
        }
    }
}