Tooltip for disabled control?

igor_stravinsky

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"

dheerendra

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

igor_stravinsky

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.

fcarney

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?

fcarney

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")
            }
        }