1 files changed, 45 insertions, 0 deletions
diff --git a/utils/widgets.tsx b/utils/widgets.tsx
new file mode 100644
index 0000000..2078aad
--- /dev/null
+++ b/utils/widgets.tsx
@@ -0,0 +1,45 @@
+import { Binding } from "astal";
+import { Astal, type Widget } from "astal/gtk3";
+import AstalHyprland from "gi://AstalHyprland";
+
+export const setupCustomTooltip = (self: any, text: string | Binding<string>) => {
+    if (!text) return null;
+
+    const window = (
+        <window
+            visible={false}
+            namespace="tooltip"
+            keymode={Astal.Keymode.NONE}
+            exclusivity={Astal.Exclusivity.IGNORE}
+            anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT}
+        >
+            <label className="tooltip" label={text} />
+        </window>
+    ) as Widget.Window;
+    self.set_tooltip_window(window);
+
+    let dirty = true;
+    let lastX = 0;
+    self.connect("size-allocate", () => (dirty = true));
+    window.connect("size-allocate", () => {
+        window.marginLeft = lastX + (self.get_allocated_width() - window.get_preferred_width()[1]) / 2;
+    });
+    if (text instanceof Binding) self.hook(text, (_: any, v: string) => !v && window.hide());
+
+    self.connect("query-tooltip", (_: any, x: number, y: number) => {
+        if (text instanceof Binding && !text.get()) return false;
+        if (dirty) {
+            const { width, height } = self.get_allocation();
+            const { x: cx, y: cy } = AstalHyprland.get_default().get_cursor_position();
+            window.marginLeft = cx + ((width - window.get_preferred_width()[1]) / 2 - x);
+            window.marginTop = cy + (height - y);
+            lastX = cx - x;
+            dirty = false;
+        }
+        return true;
+    });
+
+    self.connect("destroy", () => window.destroy());
+
+    return window;
+};