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