Important: Please read the Qt Code of Conduct -

Tooltip with ComboBox

  • 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: {
        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) {
                                     "what": editText
                console.log("editText: " + editText)
                var newItem = editText
                console.log("newItem: ", newItem)
        //Reading list from db
        Component.onCompleted: {

    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.

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


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

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

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

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

  • Lifetime Qt Champion

    @gabor53 said in Tooltip with ComboBox:

    I am using Qt 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.

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

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

Log in to reply