Create a submenu like kicker in Qml

Question

I am on a kde plasmoid for my own usage.It is an applicaton menu like kicker and I am trying to make to open a submenu when I click on an item in main menu like in the picture :

But all I can manage is this:

How can I open the submenu outside the main item of the plasmoid.Take into account that the submenu is a ListView as also is the main menu. This is the "calling" of the menu:

ListDelegate {
            id: recentitemsItem
            text: i18n("Recent Items")                
            highlight: delegateHighlight 
            
            
            PlasmaComponents.Label {
                id: submenuArrow
                text: "⏵"                    
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
            }                
                onClicked: { 
                                  
                   subMenu.visible = !subMenu.visible
                    
                }
        }

This is the menu:

Item { 
    
    id: subMenu
    visible : false     
    
    width: units.gridUnit * 14 
    height: units.gridUnit * 43
    x : units.gridUnit * 16
    y : aboutComputerItem.height + separatorItem.height + systemsettingsItem.height + appStoreItem.height + separatorItem1.height + recentitemsItem.height
    
      
    PlasmaComponents.Label {
                    id: applications                    
                    enabled: false           
                    text: "Applications"
                }
                
    ListView { 
        id: row
        anchors.top: applications.bottom
        
        width: parent.width        
        height: parent.height     
        
       model: Kicker.RecentUsageModel {
                        favoritesModel: globalFavorites                        
                        }
       delegate: ListDelegate {  
            
                height: 24
                width: parent.width
                
                
                highlight: delegateHighlight
                onClicked: if(model.url == undefined){                     
                                        executable.exec("gtk-launch  "  +  model.favoriteId);                                                                                                                  
                                    }
                                    else {executable.exec("xdg-open  '"  + model.url + "'");
                                    }      
        
                PlasmaCore.IconItem {
                    id: icon

                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 10
                    width: 16
                    height: width

                    visible: true

           

                    source: model.decoration
                }

                PlasmaComponents.Label {
                    id: label
                    
                    enabled: true
                    anchors.verticalCenter: icon.verticalCenter
                    anchors.left : icon.right
                    anchors.leftMargin: 10
                    width: parent.width 

                    verticalAlignment: Text.AlignVCenter

                    textFormat: Text.PlainText
                    wrapMode: Text.NoWrap
                    elide: Text.ElideRight

                    text: model.display
                }       
        }
    }
 
}

Answer 1

One answer to this problem is to use PlasmaCore.ToolTipArea{} like this:

import org.kde.plasma.core 2.0 as PlasmaCore


        ListDelegate {
            id: recentitemsItem
            text: i18n("Recent Items")                
            highlight: delegateHighlight        
                 
            PlasmaCore.ToolTipArea {
                id: toolTip                   
                         
                anchors.fill: parent
                active: true 
                interactive : true
                timeout : -1
                location: PlasmaCore.Types.LeftEdge 
                
                mainItem: toolTipDelegate  
                          
            } 
            
            onClicked: {
                
                toolTip.showToolTip()
             }
         }

And setting as mainItem: toolTipDelegate the code below:

Item {
        
            id: toolTipDelegate  

            width: units.gridUnit * 16 
            height: units.gridUnit * 40 
            visible: false
                                      
            ListView { 
                id: row
                                    
                width: parent.width
                height: parent.height
                
    
                model: Kicker.RecentUsageModel {
                    favoritesModel: globalFavorites              
                    }
                    
                    delegate: ListDelegate {  
                       
                        height: 24
                        width: parent.width
                        
                       
                        highlight: delegateHighlight
                           
                            onClicked: if(model.url == undefined){                     
                                    executable.exec("gtk-launch  '"  +  model.favoriteId + "'");                                                                                                                  
                                }
                                else {executable.exec("xdg-open  '"  + model.url + "'");
                                }     
    
                            PlasmaCore.IconItem {
                                    id: icon

                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.leftMargin: 10
                                    width: 16
                                    height: width
                                    visible: true
                                    source: model.decoration
                                }
           
                            PlasmaComponents.Label {
                                    id: label
                
                                    enabled: true
                                    anchors.verticalCenter: icon.verticalCenter
                                    anchors.left : icon.right
                                    anchors.leftMargin: 10
                                    width: parent.width 

                                    verticalAlignment: Text.AlignVCenter

                                    textFormat: Text.PlainText
                                    wrapMode: Text.NoWrap
                                    elide: Text.ElideRight
                                    text: model.display
                               }          
                        }
               
                
                    } 
                }

Then any time mouse hovers over Recent Items item or being clicked opens a tooltip window with the listview (the menu I want).