QML 如何在 window 上显示多个 Popup？（对于工具提示）

Question

我想在触发辅助按钮的点击时显示按钮的所有工具提示。我可以只用带有 ToolTip.show("Some instruction", -1) 的按钮来完成，但是当我用超过 1 个按钮调用此方法时，只有最后一个调用的 ToolTip 显示自己。
我发现 ToolTip 继承了 Popup，所以我想如果我可以让多个 Popup 显示在 window 上就可以解决我的问题。下面是我想做的。有什么想法吗？

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.

Answer 1

不要使用附加的工具提示属性。而是使用本地工具提示项来访问完整的 Popup 属性集。

来自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

例子

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

最后，这是上面的交互式 WASM 游乐场版本：

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

QML 如何在 window 上显示多个 Popup？（对于工具提示）

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

qml

qtquick2

例子

QML 如何在 window 上显示多个 Popup？ （对于工具提示）

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

qml

qtquick2

例子

QML 如何在 window 上显示多个 Popup？（对于工具提示）