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

user_13050727 0
Viewed 217

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.
qtquick2 qml
1 Answers

Do not use the attached ToolTip properties. Instead use local ToolTip items to get access to the full set of Popup properties.

From the documentation:

Should one need more fine-grained control over the tool tip position, or multiple simultaneous tool tip instances are needed, it is also possible to create local tool tip instances. This way, it is possible to customize the tool tip, and the whole Popup API is available

Example

Multiple Visible ToolTips example gif

import QtQuick
import QtQuick.Controls as QtControls
import QtQuick.Controls.Material

Rectangle {
    anchors.fill: parent
    
    QtControls.Pane {
        anchors.centerIn: parent
        Material.elevation: 15
        
        Row {
            id: buttonsRow
            spacing: 10
            
            Button {
                id: helperButton
                text: "Helper Button"
                font.capitalization: Font.MixedCase
                onClicked: {
                    toolTip1.open()
                    toolTip2.open()
                    toolTip3.open()
                }
            }
            
            Button {
                id: otherButton1
                text: "Other Button 1"
                font.capitalization: Font.MixedCase
                onClicked: toolTip1.open()
                
                ToolTip {
                    id: toolTip1
                    text: "button 1's instruction"
                }
            }
            
            Button {
                id: otherButton2
                text: "Other Button 2"
                font.capitalization: Font.MixedCase
                onClicked: toolTip2.open()
                
                ToolTip {
                    id: toolTip2
                    text: "button 2's instruction"
                }
            }
            
            Button {
                id: otherButton3
                text: "Other Button 3"
                font.capitalization: Font.MixedCase
                onClicked: toolTip3.open()
                
                ToolTip {
                    id: toolTip3
                    text: "button 3's instruction"
                }
            }
        }
    }
}

Finally, here is an interactive WASM Playground version of the above:

https://playground.canonic.com/1c325f1d-3085-40cb-a2ec-5dc502d4d284/multiple-visible-tooltips-example

user_148077040
Related