Tooltip with ComboBox

[gabor53]

Hi,
I have the following ComboBox:

import Felgo 3.0
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import "Code.js" as JS
import "Setup.js" as ST

ComboBox {
    id: whatCombo
    height: dp(35)
    width: backgrnd.width / 2.4
    ToolTip.visible: hovered
    ToolTip.text: qsTr("Press Enter when done.")

    ToolTip.timeout: 3000
    editable: true
    textRole: "what"

    //Displaying empty entry area.
    currentIndex: -1

    model: ListModel {
        id: listModel
    }

    delegate: ItemDelegate {
        width: whatCombo.width
        height: whatCombo.height

        //Defines the items in the dropdown list.
        Text {
            id: txt
            leftPadding: 20
            text: model.what
            font.pixelSize: 18
            color: ST.listColor()
            anchors.verticalCenter: parent.verticalCenter
        }
        onClicked: whatCombo.currentIndex = index
        highlighted: whatCombo.highlightedIndex === index
    }

    contentItem: TextInput {
        id: myInput
        leftPadding: 20
        rightPadding: whatCombo.indicator.width + whatCombo.spacing
        font.pixelSize: 18
        //If hovered text clear otherwise hint displayed.
        color: whatCombo.pressed ? ST.comboPressed1() : ST.comboPressed2()
        verticalAlignment: Text.AlignVCenter
        layer.enabled: true
    }

    //Black X in the TextInput box
    IconButton {
        icon: IconType.close
        anchors.verticalCenter: myInput.verticalCenter
        anchors.right: myInput.right
        color: "black"
        onClicked: {
            myInput.clear()
        }
    }

    background: Rectangle {
        id: rect
        width: backgrnd.width / 2.4
        implicitHeight: 80
        color: ST.editBackground()
        border.color: whatCombo.pressed ? ST.comboPressed1(
                                              ) : ST.comboPressed2()
        border.width: whatCombo.visualFocus ? 2 : 1
        radius: 30
    }

    onAccepted: {
        console.log("Entered onAccepted. CurrentIndex: " + currentIndex)

        if (find(editText) === -1) {
            listModel.append({
                                 "what": editText
                             })

            console.log("editText: " + editText)

            var newItem = editText
            console.log("newItem: ", newItem)

            JS.dbInsertWhat(newItem)
        }
    }

    //Reading list from db
    Component.onCompleted: {
        JS.dbInit()
        JS.dbGetWhatList()
    }
}

Everything works, but the tooltip is never displayed. How can I fix it in a way that when the ComboBox is hovered it is displayed? Thank you for your help.

[Shrinidhi Upadhyaya]

Hi @gabor53 , your code works fine, the tool tip is visible when you hover over the combo box.

[gabor53]

@Shrinidhi-Upadhyaya
Why can't I see it on my computer?

[Shrinidhi Upadhyaya]

Hi @gabor53 , does it give an warnings or error in the logs?

[Pradeep P N]

@gabor53
Which Qt version are you using, and what is the platform ?

[gabor53]

Hi @Pradeep-P-N & Shrinidhi Upadhyaya,
There are no warning/error messages at all. I am using Qt 4.8.2.1 based on Qt 5.12.1. I'm using it on Windows 10.
Thank you.

[jsulm]

@gabor53 said in Tooltip with ComboBox:

I am using Qt 4.8.2.1 based on Qt 5.12.1

I guess you mean QtCreator 4.8.2 based on Qt 5.12.1?
This only tells us which Qt version was used to build QtCreator, not which Qt version you're using.
So, which Qt version do you use? If you don't know you can check that in the Kit you're using.

[gabor53]

Hi @jsulm ,
The QT version is Qt 5.12.3 MinGW 32-bit.

[UD_1989]

@gabor53 : This works for me. Not sure if this will meet your requirement
ComboBox{
id: row3_combo_box_element
currentIndex: 2
model:["Level 1", "Level 2", "Level 3"]
MouseArea{
id: row3_label_ma
anchors.fill: parent
hoverEnabled: true
}
ToolTip{
text: qsTr("Test x")
visible: row3_label_ma.containsMouse
}
}