Create a submenu like kicker in Qml - 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).