fancier tooltips

.config/quickshell/modules/common/Appearance.qml

@@ -134,8 +134,8 @@ Singleton {
         property color colSecondaryContainerActive: mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54)
         property color colSurfaceContainerHighestHover: mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.95)
         property color colSurfaceContainerHighestActive: mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.85)
-        property color colTooltip: m3colors.m3inverseSurface
-        property color colOnTooltip: m3colors.m3inverseOnSurface
+        property color colTooltip: "#3C4043" // m3colors.m3inverseSurface in the specs, but the m3 website actually uses this color
+        property color colOnTooltip: "#F8F9FA" // m3colors.m3inverseOnSurface in the specs, but the m3 website actually uses this color
         property color colScrim: transparentize(m3colors.m3scrim, 0.5)
         property color colShadow: transparentize(m3colors.m3shadow, 0.75)
     }

.config/quickshell/modules/common/widgets/StyledSlider.qml

@@ -24,15 +24,15 @@ Slider {
 
     Behavior on value { // This makes the adjusted value (like volume) shift smoothly
         SmoothedAnimation {
-            velocity: Appearance.animation.elementMove.velocity
+            velocity: Appearance.animation.elementMoveFast.velocity
         }
     }
 
     Behavior on handleMargins {
         NumberAnimation {
-            duration: Appearance.animation.elementMove.duration
-            easing.type: Appearance.animation.elementMove.type
-            easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+            duration: Appearance.animation.elementMoveFast.duration
+            easing.type: Appearance.animation.elementMoveFast.type
+            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
         }
     }
 
@@ -93,9 +93,9 @@ Slider {
 
         Behavior on implicitWidth {
             NumberAnimation {
-                duration: Appearance.animation.elementMove.duration
-                easing.type: Appearance.animation.elementMove.type
-                easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                duration: Appearance.animation.elementMoveFast.duration
+                easing.type: Appearance.animation.elementMoveFast.type
+                easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
             }
         }
 

.config/quickshell/modules/common/widgets/StyledToolTip.qml

@@ -5,55 +5,68 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 ToolTip {
+    id: root
     property string content
     property bool extraVisibleCondition: true
     property bool alternativeVisibleCondition: false
-    property bool internalVisibleCondition: false
-    padding: 5
+    property bool internalVisibleCondition: {
+        const ans = (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
+        return ans
+    }
+    verticalPadding: 5
+    horizontalPadding: 10
     
-    visible: ((extraVisibleCondition && (parent.hovered === undefined || parent?.hovered) && internalVisibleCondition)) || alternativeVisibleCondition
+    opacity: internalVisibleCondition ? 1 : 0
+    visible: opacity > 0
 
-    Connections {
-        target: parent
-        function onHoveredChanged() {
-            if (parent.hovered) {
-                tooltipShowDelay.restart()
-            } else {
-                internalVisibleCondition = false
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Appearance.animation.elementMoveFast.duration
+            easing.type: Appearance.animation.elementMoveFast.type
+            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+        }
+    }
+
+    background: Item {}
+    
+    contentItem: Item {
+        id: contentItemBackground
+        implicitWidth: tooltipTextObject.width + 2 * root.horizontalPadding
+        implicitHeight: tooltipTextObject.height + 2 * root.verticalPadding
+
+        Rectangle {
+            id: backgroundRectangle
+            anchors.bottom: contentItemBackground.bottom
+            anchors.horizontalCenter: contentItemBackground.horizontalCenter
+            color: Appearance.colors.colTooltip
+            radius: Appearance.rounding.verysmall
+            width: internalVisibleCondition ? (tooltipTextObject.width + 2 * padding) : 0
+            height: internalVisibleCondition ? (tooltipTextObject.height + 2 * padding) : 0
+            clip: true
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: Appearance.animation.elementMoveFast.duration
+                    easing.type: Appearance.animation.elementMoveFast.type
+                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                }
             }
-        }
-    }
-
-    Timer {
-        id: tooltipShowDelay
-        interval: 200
-        repeat: false
-        running: false
-        onTriggered: {
-            internalVisibleCondition = true
-        }
-    }
-
-    background: Rectangle {
-        color: Appearance.colors.colTooltip
-        radius: Appearance.rounding.small
-        implicitWidth: tooltipTextObject.width + 2 * padding
-        implicitHeight: tooltipTextObject.height + 2 * padding
-        Behavior on opacity {
-            NumberAnimation {
-                target: opacity
-                duration: Appearance.animation.elementMoveFast.duration
-                easing.type: Appearance.animation.elementMoveFast.type
-                easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+            Behavior on height {
+                NumberAnimation {
+                    duration: Appearance.animation.elementMoveFast.duration
+                    easing.type: Appearance.animation.elementMoveFast.type
+                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                }
             }
-        }
-        opacity: visible ? 1 : 0
-    }
-    StyledText {
-        id: tooltipTextObject
-        text: content
-        font.pixelSize: Appearance.font.pixelSize.small
-        color: Appearance.colors.colOnTooltip
-        wrapMode: Text.Wrap
+
+            StyledText {
+                id: tooltipTextObject
+                anchors.centerIn: parent
+                text: content
+                font.pixelSize: Appearance.font.pixelSize.smaller
+                color: Appearance.colors.colOnTooltip
+                wrapMode: Text.Wrap
+            }
+        }   
     }
 }