diff --git a/html/template/sync/component/sidebar.html b/html/template/sync/component/sidebar.html
index 646dc334..dc02eeca 100644
--- a/html/template/sync/component/sidebar.html
+++ b/html/template/sync/component/sidebar.html
@@ -11,7 +11,12 @@
 
 		<ul class="sidebar-menu">
 			<li>
-				<a href="/" data-toggle="tooltip" data-placement="right" title="Home">
+				<a
+					href="/"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
+					title="Home"
+				>
 					<div class="menu-icon"><i class="bi bi-house"></i></div>
 					<span class="menu-text ms-2">Home</span>
 				</a>
@@ -19,8 +24,8 @@
 			<li>
 				<a
 					href="/admin"
-					data-toggle="tooltip"
-					data-placement="right"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
 					title="Admin Dashboard"
 				>
 					<div class="menu-icon"><i class="bi bi-headset"></i></div>
@@ -30,8 +35,8 @@
 			<li>
 				<a
 					href="/notification"
-					data-toggle="tooltip"
-					data-placement="right"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
 					title="Notifications"
 				>
 					<div class="menu-icon"><i class="bi bi-bell"></i></div>
@@ -53,8 +58,8 @@
 			<li>
 				<a
 					href="/message"
-					data-toggle="tooltip"
-					data-placement="right"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
 					title="Messages"
 				>
 					<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
@@ -64,8 +69,8 @@
 			<li>
 				<a
 					href="/pool"
-					data-toggle="tooltip"
-					data-placement="right"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
 					title="Pools"
 				>
 					<div class="menu-icon"><i class="bi bi-water"></i></div>
@@ -75,8 +80,8 @@
 			<li>
 				<a
 					href="/radar"
-					data-toggle="tooltip"
-					data-placement="right"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
 					title="Radar"
 				>
 					<div class="menu-icon"><i class="bi bi-radar"></i></div>
@@ -86,8 +91,8 @@
 			<li>
 				<a
 					href="/service-request"
-					data-toggle="tooltip"
-					data-placement="right"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
 					title="Service Requests"
 				>
 					<div class="menu-icon"><i class="bi bi-person-raised-hand"></i></div>
@@ -97,8 +102,8 @@
 			<li>
 				<a
 					href="/setting"
-					data-toggle="tooltip"
-					data-placement="right"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
 					title="Settings"
 				>
 					<div class="menu-icon"><i class="bi bi-gear"></i></div>
@@ -106,7 +111,12 @@
 				</a>
 			</li>
 			<li>
-				<a href="#" data-toggle="tooltip" data-placement="right" title="Help">
+				<a
+					href="#"
+					data-bs-toggle="tooltip"
+					data-bs-placement="right"
+					title="Help"
+				>
 					<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
 					<span class="menu-text ms-2">Help</span>
 				</a>
diff --git a/html/template/sync/layout/authenticated.html b/html/template/sync/layout/authenticated.html
index 5240fdd6..b4069fb8 100644
--- a/html/template/sync/layout/authenticated.html
+++ b/html/template/sync/layout/authenticated.html
@@ -20,7 +20,22 @@
 		<link rel="icon" href="/static/favicon-sync.ico" type="image/x-icon" />
 		{{ block "extraheader" . }}{{ end }}
 		<script>
-			var tooltipByElementId = {};
+			function setTooltipsForSidebar() {
+				const sidebarTooltips = document.querySelectorAll(
+					'#sidebar [data-bs-toggle="tooltip"]',
+				);
+				const isExpanded = document
+					.getElementById("content")
+					.classList.contains("expanded");
+				sidebarTooltips.forEach((t) => {
+					const tooltip = bootstrap.Tooltip.getOrCreateInstance(t);
+					if (isExpanded) {
+						tooltip.enable();
+					} else {
+						tooltip.disable();
+					}
+				});
+			}
 			document.addEventListener("DOMContentLoaded", function () {
 				var popoverTriggerList = [].slice.call(
 					document.querySelectorAll('[data-bs-toggle="popover"]'),
@@ -35,13 +50,10 @@
 				);
 				var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 					let t = new bootstrap.Tooltip(tooltipTriggerEl);
-					if (tooltipTriggerEl.id != "") {
-						tooltipByElementId[tooltipTriggerEl.id] = t;
-						console.log("added tooltip to", tooltipTriggerEl.id);
-					}
 					return t;
 				});
 				console.log("Initialized ", tooltipTriggerList.length, " tooltips");
+				setTooltipsForSidebar();
 			});
 		</script>
 	</head>
@@ -58,12 +70,11 @@
 		</div>
 		<script src="/static/vendor/js/bootstrap.bundle.min.js"></script>
 		<script>
-			document
-				.getElementById("sidebarToggle")
-				.addEventListener("click", function () {
-					document.getElementById("sidebar").classList.toggle("collapsed");
-					document.getElementById("content").classList.toggle("expanded");
-				});
+			document.getElementById("sidebarToggle").addEventListener("click", () => {
+				document.getElementById("sidebar").classList.toggle("collapsed");
+				document.getElementById("content").classList.toggle("expanded");
+				setTooltipsForSidebar();
+			});
 		</script>
 	</body>
 </html>