Tooltip for disabled control?



  • I'm to show a tooltip for a control that's disabled to let the user know why the control is disabled.

    Unfortunately, I can only make my Tooltip appear when the control is enabled. Is there a way to make the Tooltip appear when the parent control is disabled?

    ToolTip{
                id: disabledToolTip
                parent: mySlider
                visible: mySlider.hovered && !mySlider.enabled
                delay: 0
                timeout: 3000
                text:"This is a tooltip"
    

  • Qt Champions 2017

    There is bug already on this. You can check if any work-around exist.



  • Thanks for the pointer to the bug report, @dheerendra

    I don't hold much hope for this being resolved soon, as the original bug was logged in 2013, and there seems to be no work done since, however.

    The work-around is to add yet another component over the control that needs a toolTip, which isn't disabled, and will show the toolTip when moused over. The catch is that the new component will interfere with mouse actions on the control when it is enabled.



  • Why not do something like this?:

    import QtQuick 2.9
    import QtQuick.Window 2.3
    import QtQuick.Controls 2.2
    import QtQuick.Controls.Material 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Column{
            spacing: 5
            Rectangle{
                width: 150
                height: 50
                Button {
                    anchors.fill: parent
                    text: qsTr("Toggle Active")
    
                    ToolTip.visible: hovered
                    ToolTip.text: qsTr("Save the active project")
                    onClicked: {
                        stateButton.active = stateButton.active ? false : true
                    }
                }
            }
            Rectangle{
                id:stateButton
                width: 150
                height: 50
    
                property bool active: true
    
                Button {
                    anchors.fill: parent
                    text: qsTr("Save")
                    enabled: parent.active
                    visible: parent.active
    
                    ToolTip.visible: hovered
                    ToolTip.text: qsTr("Save the active project")
                    onClicked: {
                        console.log("default action")
                    }
                }
                Button{
                    anchors.fill: parent
                    text: qsTr("Save")
                    enabled: !parent.active
                    visible: !parent.active
    
                    Material.foreground: "grey"
                    //Material.foreground: Material.color(Material.blue, Material.Shade100)
                    //Material.background: Material.color(Material.blue, Material.Shade100)
    
                    ToolTip.visible: hovered
                    ToolTip.text: qsTr("Disabled: Save the active project")
                }
            }
        }
    }
    

    Just abstract this in a qml file. Might be better to use states for this.

    You will need to do this to enable materials (right after "app" creation):

    QQuickStyle::setStyle("Material");
    

    Materials Link
    I could not find a way to color the text for the button otherwise. Is there another way?



  • I figured out how to change the color without messing with materials feature:

            Rectangle{
                id:stateButton
                width: 150
                height: 50
    
                property bool active: true
    
                Button {
                    anchors.fill: parent
                    text: qsTr("Save")
                    enabled: parent.active
                    visible: parent.active
    
                    ToolTip.visible: hovered
                    ToolTip.text: qsTr("Save the active project")
                    onClicked: {
                        console.log("default action")
                    }
                }
                Button{
                    id: disButton
                    anchors.fill: parent
                    text: qsTr("Save")
                    enabled: !parent.active
                    visible: !parent.active
    
                    contentItem: Text {
                        text: parent.text
                        font: parent.font
                        opacity: enabled ? 1.0 : 0.3
                        color: parent.down ? "grey" : "grey"
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        elide: Text.ElideRight
                    }                
    
                    ToolTip.visible: hovered
                    ToolTip.text: qsTr("Disabled: Save the active project")
                }
            }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.