Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to show multiple Popup on a window? (for ToolTip)



  • Hi. I want to show all ToolTips of buttons when a helper button's clicking triggered.
    I could do it with only a button with ToolTip.show("Some instruction", -1), but when I called this method with more than 1 buttons, only last called ToolTip show itself.
    I found the ToolTip inherits Popup, so I think I can solve my problem if I can make multiple Popups to show on a window.
    Below is what I wanted to do. Any ideas?

    Button {
        id: helperButton
        text: "Help"
        onClicked: {
            otherButton1.ToolTip.show("button 1's instruction", -1)
            otherButton2.ToolTip.show("button 2's instruction", -1)
            otherButton3.ToolTip.show("button 3's instruction", -1)
        }
    }
    
    /// Result: Only ToolTip of @otherButton3 shows. I want all buttons' ToolTip show at the same time.
    

  • Qt Champions 2018

    As mentioned in the documentation, when using attached ToolTips, you can only have one visible at a time.
    To have more than one, you need to have standalone ToolTip instances ( https://doc.qt.io/qt-5/qml-qtquick-controls2-tooltip.html#custom-tool-tips )

    You could do that with an Instantiator for example:

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtQuick.Controls 2.15
    
    Window {
        width: 640
        height: 480
        visible: true
    
        Button {
            text: "Show tooltips"
            onClicked: toolTipTimer.start()
        }
    
        Column {
            anchors.centerIn: parent
            spacing: 32
            Button {
                id: button1
                text: "Button 1"
            }
            Button {
                id: button2
                text: "Button 2"
            }
            Button {
                id: button3
                text: "Button 3"
            }
        }
        Timer {
            id: toolTipTimer
            interval: 4000
        }
        Instantiator {
            active: toolTipTimer.running
            model: [
                { item: button1, description: "button 1's instruction" },
                { item: button2, description: "button 2's instruction" },
                { item: button3, description: "button 3's instruction" },
            ]
            delegate: ToolTip {
                visible: true
                parent: modelData.item
                text: modelData.description
            }
        }
    }
    

    Here I've used a static model, but you could also have used column.children with each button storing its tooltip text and using that in the ToolTip delegate for its text.



  • @GrecKo
    Nice and good example! I can solve my problem. Thanks.


Log in to reply