From 952dc634b4b80eea636fff0af9580ab42c31bc22 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 17 Feb 2026 18:24:10 +0200
Subject: [PATCH] fix(launch_bar): wrong tooltip in sync status (closes #8266)

---
 .../src/widgets/launch_bar/SyncStatus.tsx     | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/widgets/launch_bar/SyncStatus.tsx b/apps/client/src/widgets/launch_bar/SyncStatus.tsx
index f5919f912b..651b89c075 100644
--- a/apps/client/src/widgets/launch_bar/SyncStatus.tsx
+++ b/apps/client/src/widgets/launch_bar/SyncStatus.tsx
@@ -1,12 +1,14 @@
-import { useEffect, useRef, useState } from "preact/hooks";
 import "./SyncStatus.css";
-import { t } from "../../services/i18n";
-import clsx from "clsx";
-import { escapeQuotes } from "../../services/utils";
-import { useStaticTooltip, useTriliumOption } from "../react/hooks";
-import sync from "../../services/sync";
-import ws, { subscribeToMessages, unsubscribeToMessage } from "../../services/ws";
+
 import { WebSocketMessage } from "@triliumnext/commons";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+import { t } from "../../services/i18n";
+import sync from "../../services/sync";
+import { escapeQuotes } from "../../services/utils";
+import ws, { subscribeToMessages, unsubscribeToMessage } from "../../services/ws";
+import { useStaticTooltip, useTriliumOption } from "../react/hooks";
 
 type SyncState = "unknown" | "in-progress"
     | "connected-with-changes" | "connected-no-changes"
@@ -53,29 +55,29 @@ export default function SyncStatus() {
     const spanRef = useRef<HTMLSpanElement>(null);
     const [ syncServerHost ] = useTriliumOption("syncServerHost");
     useStaticTooltip(spanRef, {
-        html: true
-        // TODO: Placement
+        html: true,
+        title: escapeQuotes(title)
     });
 
     return (syncServerHost &&
         <div class="sync-status-widget launcher-button">
             <div class="sync-status">
                 <span
+                    key={syncState} // Force re-render when state changes to update tooltip content.
                     ref={spanRef}
                     className={clsx("sync-status-icon", `sync-status-${syncState}`, icon)}
-                    title={escapeQuotes(title)}
                     onClick={() => {
                         if (syncState === "in-progress") return;
                         sync.syncNow();
                     }}
                 >
                     {hasChanges && (
-                        <span class="bx bxs-star sync-status-sub-icon"></span>
+                        <span class="bx bxs-star sync-status-sub-icon" />
                     )}
                 </span>
             </div>
         </div>
-    )
+    );
 }
 
 function useSyncStatus() {