feat: replace tooltip with new design (#3969)

apps/core/src/components/affine/create-workspace-modal/index.tsx

@@ -4,19 +4,19 @@ import {
   ModalCloseButton,
   ModalWrapper,
   toast,
-  Tooltip,
 } from '@affine/component';
 import { DebugLogger } from '@affine/debug';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { HelpIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import type {
   LoadDBFileResult,
   SelectDBFileLocationResult,
 } from '@toeverything/infra/type';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useLayoutEffect } from 'react';
 import { useCallback, useState } from 'react';
 
@@ -125,6 +125,7 @@ const SetDBLocationContent = ({
   onConfirmLocation,
 }: SetDBLocationContentProps) => {
   const t = useAFFiNEI18N();
+  const ref = useRef(null);
   const defaultDBLocation = useDefaultDBLocation();
   const [opening, setOpening] = useState(false);
 
@@ -161,11 +162,12 @@ const SetDBLocationContent = ({
           {t['Customize']()}
         </Button>
         <Tooltip
-          zIndex={1000}
           content={t['Default db location hint']({
             location: defaultDBLocation,
           })}
-          placement="top-start"
+          portalOptions={{
+            container: ref.current,
+          }}
         >
           <Button
             data-testid="create-workspace-default-location-button"
@@ -175,6 +177,7 @@ const SetDBLocationContent = ({
             }}
             icon={<HelpIcon />}
             iconPosition="end"
+            ref={ref}
           >
             {t['Default Location']()}
           </Button>

apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx

@@ -1,4 +1,4 @@
-import { FlexWrapper, Switch, Tooltip } from '@affine/component';
+import { FlexWrapper, Switch } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { Unreachable } from '@affine/env/constant';
 import type {
@@ -8,6 +8,7 @@ import type {
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -93,10 +94,7 @@ const FakePublishPanelAffine = (_props: FakePublishPanelAffineProps) => {
   const t = useAFFiNEI18N();
 
   return (
-    <Tooltip
-      content={t['com.affine.settings.workspace.publish-tooltip']()}
-      placement="top"
-    >
+    <Tooltip content={t['com.affine.settings.workspace.publish-tooltip']()}>
       <div className={style.fakeWrapper}>
         <SettingRow name={t['Publish']()} desc={t['Unpublished hint']()}>
           <Switch checked={false} />

apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx

@@ -1,7 +1,8 @@
-import { FlexWrapper, toast, Tooltip } from '@affine/component';
+import { FlexWrapper, toast } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import type { MoveDBFileResult } from '@toeverything/infra/type';
 import { useMemo } from 'react';
 import { useCallback, useEffect, useState } from 'react';
@@ -75,9 +76,9 @@ export const StoragePanel = ({ workspace }: StoragePanelProps) => {
       secondaryPath ? (
         <FlexWrapper justifyContent="space-between">
           <Tooltip
-            zIndex={1000}
             content={t['com.affine.settings.storage.db-location.change-hint']()}
-            placement="top-start"
+            side="top"
+            align="start"
           >
             <Button
               data-testid="move-folder"

apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -1,4 +1,4 @@
-import { ScrollableContainer, Tooltip } from '@affine/component';
+import { ScrollableContainer } from '@affine/component';
 import {
   WorkspaceListItemSkeleton,
   WorkspaceListSkeleton,
@@ -7,11 +7,12 @@ import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
-import { Suspense } from 'react';
+import { Suspense, useRef } from 'react';
 
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import type {
@@ -136,6 +137,7 @@ const WorkspaceListItem = ({
 }: WorkspaceListItemProps) => {
   const workspace = useStaticBlockSuiteWorkspace(meta.id);
   const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
+  const ref = useRef(null);
 
   return (
     <div
@@ -143,16 +145,17 @@ const WorkspaceListItem = ({
       title={workspaceName}
       onClick={onClick}
       data-testid="workspace-list-item"
+      ref={ref}
     >
       <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
       <span className="setting-name">{workspaceName}</span>
       {isCurrent ? (
         <Tooltip
           content="Current"
-          title="Current"
-          offset={[0, -5]}
-          placement="top"
-          disablePortal={false}
+          side="top"
+          portalOptions={{
+            container: ref.current,
+          }}
         >
           <div
             className={currentWorkspaceLabel}