-

ui/components/tooltip.slint

@@ -0,0 +1,42 @@
+import { Theme, SpacingSystem, Typography, Animations } from "../theme/theme.slint";
+
+export component Tooltip {
+    in property <string> text: "";
+    in property <bool> show: false;
+    
+    if root.show: popup := Rectangle {
+        y: -self.height - 8px;
+        x: (parent.width - self.width) / 2;
+        width: tooltip-text.width + SpacingSystem.spacing.s3 * 2;
+        height: tooltip-text.height + SpacingSystem.spacing.s2 * 2;
+        background: Theme.colors.foreground;
+        border-radius: SpacingSystem.radius.sm;
+        
+        drop-shadow-blur: 8px;
+        drop-shadow-color: #00000030;
+        drop-shadow-offset-y: 2px;
+        
+        opacity: root.show ? 1 : 0;
+        animate opacity { duration: Animations.durations.fast; }
+        
+        tooltip-text := Text {
+            text: root.text;
+            color: Theme.colors.background;
+            font-size: Typography.sizes.xs;
+            horizontal-alignment: center;
+            vertical-alignment: center;
+            x: SpacingSystem.spacing.s3;
+            y: SpacingSystem.spacing.s2;
+        }
+        
+        // Arrow
+        arrow := Path {
+            y: parent.height;
+            x: (parent.width - 8px) / 2;
+            width: 8px;
+            height: 4px;
+            fill: Theme.colors.foreground;
+            commands: "M 0 0 L 4 4 L 8 0 Z";
+        }
+    }
+}