flyout tooltips

modules/BarIcon.qml

@@ -1,8 +1,9 @@
 import QtQuick
-import QtQuick.Controls
+import Quickshell
 import "." as M
 
 Text {
+    id: root
     property string icon: ""
     property string tooltip: ""
 
@@ -12,9 +13,17 @@ Text {
     font.family: M.Theme.iconFontFamily
     verticalAlignment: Text.AlignVCenter
 
-    HoverHandler { id: _hover }
+    HoverHandler {
-    M.BarTooltip {
+        onHoveredChanged: {
-        visible: _hover.hovered && parent.tooltip !== ""
+            if (hovered && root.tooltip !== "") {
-        text: parent.tooltip
+                const win = QsWindow.window
+                M.FlyoutState.text = root.tooltip
+                M.FlyoutState.itemX = root.mapToItem(win, root.width / 2, 0).x
+                M.FlyoutState.screen = win?.screen ?? null
+                M.FlyoutState.visible = true
+            } else if (!hovered && root.tooltip !== "") {
+                M.FlyoutState.visible = false
+            }
+        }
     }
 }

modules/BarLabel.qml

@@ -1,8 +1,9 @@
 import QtQuick
-import QtQuick.Controls
+import Quickshell
 import "." as M
 
 Text {
+    id: root
     property string label: ""
     property string tooltip: ""
 
@@ -12,9 +13,17 @@ Text {
     font.family: M.Theme.fontFamily
     verticalAlignment: Text.AlignVCenter
 
-    HoverHandler { id: _hover }
+    HoverHandler {
-    M.BarTooltip {
+        onHoveredChanged: {
-        visible: _hover.hovered && parent.tooltip !== ""
+            if (hovered && root.tooltip !== "") {
-        text: parent.tooltip
+                const win = QsWindow.window
+                M.FlyoutState.text = root.tooltip
+                M.FlyoutState.itemX = root.mapToItem(win, root.width / 2, 0).x
+                M.FlyoutState.screen = win?.screen ?? null
+                M.FlyoutState.visible = true
+            } else if (!hovered && root.tooltip !== "") {
+                M.FlyoutState.visible = false
+            }
+        }
     }
 }

modules/BarSection.qml

@@ -1,12 +1,22 @@
 import QtQuick
+import Quickshell
 import "." as M
 
 Row {
+    id: root
     property string tooltip: ""
 
-    HoverHandler { id: _hover }
+    HoverHandler {
-    M.BarTooltip {
+        onHoveredChanged: {
-        visible: _hover.hovered && parent.tooltip !== ""
+            if (hovered && root.tooltip !== "") {
-        text: parent.tooltip
+                const win = QsWindow.window
+                M.FlyoutState.text = root.tooltip
+                M.FlyoutState.itemX = root.mapToItem(win, root.width / 2, 0).x
+                M.FlyoutState.screen = win?.screen ?? null
+                M.FlyoutState.visible = true
+            } else if (!hovered && root.tooltip !== "") {
+                M.FlyoutState.visible = false
+            }
+        }
     }
 }

modules/BarTooltip.qml

@@ -1,22 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import "." as M
-
-ToolTip {
-    id: tip
-    padding: 6
-
-    background: Rectangle {
-        color: M.Theme.base01
-        border.color: M.Theme.base03
-        border.width: 1
-        radius: 4
-    }
-
-    contentItem: Text {
-        text: tip.text
-        color: M.Theme.base05
-        font.pixelSize: M.Theme.fontSize
-        font.family: M.Theme.fontFamily
-    }
-}

modules/Flyout.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import "." as M
+
+PanelWindow {
+    id: root
+
+    required property var screen
+
+    visible: M.FlyoutState.visible && M.FlyoutState.screen === screen
+    color: "transparent"
+
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.exclusiveZone: 0
+    WlrLayershell.namespace: "nova-flyout"
+
+    anchors {
+        top: true
+        left: true
+        right: true
+    }
+
+    margins.top: M.Theme.barHeight + 4
+    implicitHeight: box.implicitHeight + 8
+
+    Rectangle {
+        id: box
+
+        x: Math.max(4, Math.min(M.FlyoutState.itemX - implicitWidth / 2, parent.width - implicitWidth - 4))
+        y: 4
+
+        implicitWidth: label.implicitWidth + 16
+        implicitHeight: label.implicitHeight + 12
+
+        color: M.Theme.base01
+        border.color: M.Theme.base03
+        border.width: 1
+        radius: 4
+
+        Text {
+            id: label
+            anchors.centerIn: parent
+            text: M.FlyoutState.text
+            color: M.Theme.base05
+            font.pixelSize: M.Theme.fontSize
+            font.family: M.Theme.fontFamily
+        }
+    }
+}

modules/FlyoutState.qml

@@ -0,0 +1,9 @@
+pragma Singleton
+import QtQuick
+
+QtObject {
+    property bool visible: false
+    property string text: ""
+    property real itemX: 0
+    property var screen: null
+}

modules/qmldir

@@ -1,8 +1,9 @@
 module modules
 singleton Theme 1.0 Theme.qml
+singleton FlyoutState 1.0 FlyoutState.qml
 Bar 1.0 Bar.qml
 BarSection 1.0 BarSection.qml
-BarTooltip 1.0 BarTooltip.qml
+Flyout 1.0 Flyout.qml
 Workspaces 1.0 Workspaces.qml
 WindowTitle 1.0 WindowTitle.qml
 Clock 1.0 Clock.qml

shell.qml

@@ -7,9 +7,17 @@ ShellRoot {
     Variants {
         model: Quickshell.screens
 
-        delegate: Bar {
+        Scope {
+            id: scope
             required property var modelData
-            screen: modelData
+
+            Bar {
+                screen: scope.modelData
+            }
+
+            Flyout {
+                screen: scope.modelData
+            }
         }
     }
 }