bar tooltips: refractor tooltip bg to StyledPopup

.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,94 +6,83 @@ import qs.modules.common.widgets
 import QtQuick
 import QtQuick.Layouts
 
-Rectangle {
-    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
+    implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
+    implicitHeight: gridLayout.implicitHeight
 
-    ColumnLayout {
-        id: columnLayout
+    // Header
+    RowLayout {
+        id: header
         spacing: 5
-        anchors.centerIn: root
-        implicitWidth: Math.max(header.implicitWidth, gridLayout.implicitWidth)
-        implicitHeight: gridLayout.implicitHeight
+        Layout.alignment: Qt.AlignHCenter
 
-        // Header
-        RowLayout {
-            id: header
-            spacing: 5
-            Layout.alignment: Qt.AlignHCenter
-
-            MaterialSymbol {
-                fill: 0
-                font.weight: Font.Medium
-                text: "location_on"
-                iconSize: Appearance.font.pixelSize.large
-                color: Appearance.colors.colOnSurfaceVariant
-            }
-
-            StyledText {
-                text: Weather.data.city
-                font {
-                    weight: Font.Medium
-                    pixelSize: Appearance.font.pixelSize.normal
-                }
-                color: Appearance.colors.colOnSurfaceVariant
-            }
+        MaterialSymbol {
+            fill: 0
+            font.weight: Font.Medium
+            text: "location_on"
+            iconSize: Appearance.font.pixelSize.large
+            color: Appearance.colors.colOnSurfaceVariant
         }
 
-        // Metrics grid
-        GridLayout {
-            id: gridLayout
-            columns: 2
-            rowSpacing: 5
-            columnSpacing: 5
-            uniformCellWidths: true
-
-            WeatherCard {
-                title: Translation.tr("UV Index")
-                symbol: "wb_sunny"
-                value: Weather.data.uv
-            }
-            WeatherCard {
-                title: Translation.tr("Wind")
-                symbol: "air"
-                value: `(${Weather.data.windDir}) ${Weather.data.wind}`
-            }
-            WeatherCard {
-                title: Translation.tr("Precipitation")
-                symbol: "rainy_light"
-                value: Weather.data.precip
-            }
-            WeatherCard {
-                title: Translation.tr("Humidity")
-                symbol: "humidity_low"
-                value: Weather.data.humidity
-            }
-            WeatherCard {
-                title: Translation.tr("Visibility")
-                symbol: "visibility"
-                value: Weather.data.visib
-            }
-            WeatherCard {
-                title: Translation.tr("Pressure")
-                symbol: "readiness_score"
-                value: Weather.data.press
-            }
-            WeatherCard {
-                title: Translation.tr("Sunrise")
-                symbol: "wb_twilight"
-                value: Weather.data.sunrise
-            }
-            WeatherCard {
-                title: Translation.tr("Sunset")
-                symbol: "bedtime"
-                value: Weather.data.sunset
+        StyledText {
+            text: Weather.data.city
+            font {
+                weight: Font.Medium
+                pixelSize: Appearance.font.pixelSize.normal
             }
+            color: Appearance.colors.colOnSurfaceVariant
         }
     }
-}
+
+    // Metrics grid
+    GridLayout {
+        id: gridLayout
+        columns: 2
+        rowSpacing: 5
+        columnSpacing: 5
+        uniformCellWidths: true
+
+        WeatherCard {
+            title: Translation.tr("UV Index")
+            symbol: "wb_sunny"
+            value: Weather.data.uv
+        }
+        WeatherCard {
+            title: Translation.tr("Wind")
+            symbol: "air"
+            value: `(${Weather.data.windDir}) ${Weather.data.wind}`
+        }
+        WeatherCard {
+            title: Translation.tr("Precipitation")
+            symbol: "rainy_light"
+            value: Weather.data.precip
+        }
+        WeatherCard {
+            title: Translation.tr("Humidity")
+            symbol: "humidity_low"
+            value: Weather.data.humidity
+        }
+        WeatherCard {
+            title: Translation.tr("Visibility")
+            symbol: "visibility"
+            value: Weather.data.visib
+        }
+        WeatherCard {
+            title: Translation.tr("Pressure")
+            symbol: "readiness_score"
+            value: Weather.data.press
+        }
+        WeatherCard {
+            title: Translation.tr("Sunrise")
+            symbol: "wb_twilight"
+            value: Weather.data.sunrise
+        }
+        WeatherCard {
+            title: Translation.tr("Sunset")
+            symbol: "bedtime"
+            value: Weather.data.sunset
+        }
+    }
+}