chore(core): update tooltip of mode switcher (#9711)

Close [BS-2325](https://linear.app/affine-design/issue/BS-2325/tooltips-显示)

https://github.com/user-attachments/assets/bd4c6045-8de1-4e72-87ab-2d1d3262e6b7

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx

@@ -1,4 +1,4 @@
-import { RadioGroup, type RadioItem, Tooltip } from '@affine/component';
+import { RadioGroup, type RadioItem } from '@affine/component';
 import { registerAffineCommand } from '@affine/core/commands';
 import { EditorService } from '@affine/core/modules/editor';
 import { ViewService, WorkbenchService } from '@affine/core/modules/workbench';
@@ -92,21 +92,12 @@ export const EditorModeSwitch = () => {
   }, [currentMode, isActiveView, isSharedMode, onModeChange, t, trash]);
 
   return (
-    <Tooltip
+    <PureEditorModeSwitch
-      content={t['Switch']()}
+      mode={currentMode}
-      shortcut={['$alt', 'S']}
+      setMode={onModeChange}
-      side="bottom"
+      hidePage={shouldHide('page')}
-      options={{ hidden: trash || isSharedMode }}
+      hideEdgeless={shouldHide('edgeless')}
-    >
+    />
-      <div>
-        <PureEditorModeSwitch
-          mode={currentMode}
-          setMode={onModeChange}
-          hidePage={shouldHide('page')}
-          hideEdgeless={shouldHide('edgeless')}
-        />
-      </div>
-    </Tooltip>
   );
 };
 

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx

@@ -1,7 +1,9 @@
+import { Tooltip } from '@affine/component';
 import {
   type CustomLottieProps,
   InternalLottie,
 } from '@affine/component/internal-lottie';
+import { useI18n } from '@affine/i18n';
 import type { HTMLAttributes } from 'react';
 import type React from 'react';
 import { cloneElement, useState } from 'react';
@@ -58,19 +60,33 @@ const edgelessLottieOptions = {
 export const PageSwitchItem = (
   props: Omit<HoverAnimateControllerProps, 'children'>
 ) => {
+  const t = useI18n();
   return (
-    <HoverAnimateController {...props}>
+    <Tooltip
-      <InternalLottie options={pageLottieOptions} />
+      content={t['com.affine.header.mode-switch.page']()}
-    </HoverAnimateController>
+      shortcut={['$alt', 'S']}
+      side="bottom"
+    >
+      <HoverAnimateController {...props}>
+        <InternalLottie options={pageLottieOptions} />
+      </HoverAnimateController>
+    </Tooltip>
   );
 };
 
 export const EdgelessSwitchItem = (
   props: Omit<HoverAnimateControllerProps, 'children'>
 ) => {
+  const t = useI18n();
   return (
-    <HoverAnimateController {...props}>
+    <Tooltip
-      <InternalLottie options={edgelessLottieOptions} />
+      content={t['com.affine.header.mode-switch.edgeless']()}
-    </HoverAnimateController>
+      shortcut={['$alt', 'S']}
+      side="bottom"
+    >
+      <HoverAnimateController {...props}>
+        <InternalLottie options={edgelessLottieOptions} />
+      </HoverAnimateController>
+    </Tooltip>
   );
 };

packages/frontend/i18n/src/resources/en.json

@@ -514,6 +514,8 @@
   "com.affine.filter.save-view": "Save view",
   "com.affine.filter.true": "true",
   "com.affine.filterList.button.add": "Add filter",
+  "com.affine.header.mode-switch.page": "View in Page mode",
+  "com.affine.header.mode-switch.edgeless": "View in Edgeless Canvas",
   "com.affine.header.option.add-tag": "Add tag",
   "com.affine.header.option.duplicate": "Duplicate",
   "com.affine.header.option.open-in-desktop": "Open in desktop app",