Add Harbor mode tooltip on hover and focus

src/web/components/ClientOverviewPage.jsx

@@ -105,12 +105,18 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, busy, onSetGa
         className="harbor-brand-control"
         type="button"
         aria-label={label}
+        aria-describedby="harbor-mode-tooltip"
         aria-pressed={gatewayDirect}
-        title={label}
         disabled={busy}
         onClick={() => onSetGatewayAuto(!gatewayDirect)}
       >
         {content}
+        <span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip">
+          <strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong>
+          <span>{gatewayDirect
+            ? 'Трафик идёт через Gateway в этой сети. Нажмите, чтобы использовать локальный VPN.'
+            : 'Сейчас используется локальный VPN. Нажмите, чтобы направить трафик через Gateway.'}</span>
+        </span>
       </button> : <div aria-label={`Harbor ${product}`}>{content}</div>}
     </div>
   );