bar tooltips: refractor tooltip bg to StyledPopup

.config/quickshell/ii/modules/bar/BatteryIndicator.qml

@@ -97,7 +97,8 @@ MouseArea {
 
     StyledPopup {
         hoverTarget: root
-        contentComponent: BatteryPopup {
+        
+        BatteryPopup {
             id: batteryPopup
             anchors.centerIn: parent
         }

.config/quickshell/ii/modules/bar/BatteryPopup.qml

@@ -5,16 +5,7 @@ import qs
 import QtQuick
 import QtQuick.Layouts
 
-Rectangle {
+ColumnLayout {
-    id: root
-    readonly property real margin: 10
-    implicitWidth: columnLayout.implicitWidth + margin * 2
-    implicitHeight: columnLayout.implicitHeight + margin * 2
-    color: Appearance.colors.colSurfaceContainer
-    radius: Appearance.rounding.small
-    clip: true
-
-    ColumnLayout {
     id: columnLayout
     anchors.centerIn: parent
     spacing: 4
@@ -134,5 +125,4 @@ Rectangle {
             }
         }
     }
-    }
 }

.config/quickshell/ii/modules/bar/ClockWidget.qml

@@ -75,14 +75,6 @@ Item {
 
     StyledPopup {
         hoverTarget: mouseArea
-        contentComponent: Rectangle {
-            id: datePopup
-            readonly property real margin: 12
-            implicitWidth: columnLayout.implicitWidth + margin * 2
-            implicitHeight: columnLayout.implicitHeight + margin * 2
-            color: Appearance.colors.colSurfaceContainer
-            radius: Appearance.rounding.small
-            clip: true
         
         ColumnLayout {
             id: columnLayout
@@ -144,6 +136,5 @@ Item {
             }
         }
     }
-    }
 
 }

.config/quickshell/ii/modules/bar/Resource.qml

@@ -70,14 +70,6 @@ Item {
 
     StyledPopup {
         hoverTarget: mouseArea
-        contentComponent: Rectangle {
-            id: resourcePopup
-            readonly property real margin: 10
-            implicitWidth: columnLayout.implicitWidth + margin * 2
-            implicitHeight: columnLayout.implicitHeight + margin * 2
-            color: Appearance.colors.colSurfaceContainer
-            radius: Appearance.rounding.small
-            clip: true
         
         ColumnLayout {
             id: columnLayout
@@ -135,7 +127,6 @@ Item {
 
         }
     }
-    }
 
     Behavior on implicitWidth {
         NumberAnimation {

.config/quickshell/ii/modules/bar/weather/WeatherBar.qml

@@ -38,7 +38,8 @@ MouseArea {
 
     StyledPopup {
         hoverTarget: root
-        contentComponent: WeatherPopup {
+        
+        WeatherPopup {
             id: weatherPopup
             anchors.centerIn: parent
         }

.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml

@@ -6,19 +6,9 @@ import qs.modules.common.widgets
 import QtQuick
 import QtQuick.Layouts
 
-Rectangle {
+ColumnLayout {
-    id: root
-    readonly property real margin: 10
-    implicitWidth: columnLayout.implicitWidth + margin * 2
-    implicitHeight: columnLayout.implicitHeight + margin * 2
-    color: Appearance.colors.colSurfaceContainer
-    radius: Appearance.rounding.small
-    clip: true
-
-    ColumnLayout {
     id: columnLayout
     spacing: 5
-        anchors.centerIn: root
     implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
     implicitHeight: gridLayout.implicitHeight
 
@@ -95,5 +85,4 @@ Rectangle {
             value: Weather.data.sunset
         }
     }
-    }
 }

.config/quickshell/ii/modules/common/widgets/StyledPopup.qml

@@ -10,8 +10,8 @@ import Quickshell.Wayland
 LazyLoader {
     id: root
 
-    property Item hoverTarget
+    property MouseArea hoverTarget
-    property Component contentComponent
+    default property Item contentItem
 
     active: hoverTarget && hoverTarget.containsMouse
 
@@ -25,13 +25,13 @@ LazyLoader {
         anchors.top: !Config.options.bar.bottom
         anchors.bottom: Config.options.bar.bottom
 
-        implicitWidth: popupContent.implicitWidth
+        implicitWidth: popupBackground.implicitWidth
-        implicitHeight: popupContent.implicitHeight
+        implicitHeight: popupBackground.implicitHeight
 
         margins {
             left: root.QsWindow?.mapFromItem(
                 root.hoverTarget, 
-                (root.hoverTarget.width - popupContent.implicitWidth) / 2, 0
+                (root.hoverTarget.width - popupBackground.implicitWidth) / 2, 0
                 ).x
             top: Appearance.sizes.hyprlandGapsOut
             bottom: Appearance.sizes.hyprlandGapsOut
@@ -39,10 +39,16 @@ LazyLoader {
         WlrLayershell.namespace: "quickshell:popup"
         WlrLayershell.layer: WlrLayer.Overlay
 
-        Loader {
+        Rectangle {
-            id: popupContent
+            id: popupBackground
-            sourceComponent: root.contentComponent
+            readonly property real margin: 10
-            anchors.centerIn: parent
+            color: Appearance.colors.colSurfaceContainer
+            radius: Appearance.rounding.small
+
+            implicitWidth: root.contentItem.implicitWidth + margin * 2
+            implicitHeight: root.contentItem.implicitHeight + margin * 2
+
+            children: [root.contentItem]
         }
     }
 }