From 1e87707b2e2b2b383275f0586e7f3c245942e7c3 Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Mon, 28 Aug 2023 14:15:12 +0800
Subject: [PATCH] feat: replace tooltip with new design (#3969)

---
 apps/core/package.json                        |  2 +-
 apps/core/src/bootstrap/plugins/setup.ts      |  3 ++
 .../affine/create-workspace-modal/index.tsx   | 11 ++--
 .../new-workspace-setting-detail/publish.tsx  |  8 ++-
 .../new-workspace-setting-detail/storage.tsx  |  7 +--
 .../setting-modal/setting-sidebar/index.tsx   | 15 +++---
 .../block-suite-mode-switch/index.tsx         | 17 +++++--
 .../src/components/pure/help-island/index.tsx | 30 +++--------
 apps/storybook/src/stories/card.stories.tsx   |  3 +-
 .../app-sidebar/app-updater-button/index.tsx  |  4 +-
 .../sidebar-header/sidebar-switch.tsx         | 11 ++--
 .../src/components/import-page/index.tsx      |  3 +-
 .../page-list/components/favorite-tag.tsx     |  8 +--
 .../components/page-list/operation-cell.tsx   |  7 +--
 .../page-list/view/collection-bar.tsx         | 12 ++---
 .../page-list/view/collection-list.tsx        | 13 +++--
 packages/component/src/index.ts               |  1 -
 packages/component/src/ui/tooltip/index.tsx   |  1 -
 packages/component/src/ui/tooltip/tooltip.tsx | 40 ---------------
 plugins/copilot/package.json                  |  2 +-
 plugins/copilot/src/UI/header-item.tsx        |  4 +-
 plugins/hello-world/package.json              |  2 +-
 plugins/hello-world/src/app.tsx               |  2 +-
 plugins/image-preview/package.json            |  2 +-
 plugins/image-preview/src/component/index.tsx | 24 ++++-----
 plugins/outline/package.json                  |  2 +-
 plugins/outline/src/app.tsx                   |  2 +-
 yarn.lock                                     | 50 +++++++++++++++----
 28 files changed, 138 insertions(+), 148 deletions(-)
 delete mode 100644 packages/component/src/ui/tooltip/index.tsx
 delete mode 100644 packages/component/src/ui/tooltip/tooltip.tsx

diff --git a/apps/core/package.json b/apps/core/package.json
index 59767f2eb5..a9ae719ed7 100644
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -39,7 +39,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.6",
     "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.17",
+    "@toeverything/components": "^0.0.19",
     "async-call-rpc": "^6.3.1",
     "cmdk": "^0.2.0",
     "css-spring": "^4.1.0",
diff --git a/apps/core/src/bootstrap/plugins/setup.ts b/apps/core/src/bootstrap/plugins/setup.ts
index 7e42aeda6d..213f77541d 100644
--- a/apps/core/src/bootstrap/plugins/setup.ts
+++ b/apps/core/src/bootstrap/plugins/setup.ts
@@ -158,6 +158,9 @@ function createSetupImpl(rootStore: ReturnType<typeof createStore>) {
     '@toeverything/components/button': import(
       '@toeverything/components/button'
     ),
+    '@toeverything/components/tooltip': import(
+      '@toeverything/components/tooltip'
+    ),
   });
 
   // pluginName -> module -> importName -> updater[]
diff --git a/apps/core/src/components/affine/create-workspace-modal/index.tsx b/apps/core/src/components/affine/create-workspace-modal/index.tsx
index d40da0922f..806050da45 100644
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/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>
diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx
index 4420c6f542..7aebc3c076 100644
--- a/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx
+++ b/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} />
diff --git a/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx b/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx
index 9615902402..c2063949c7 100644
--- a/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx
+++ b/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"
diff --git a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
index 3819b21014..3d2a93b20e 100644
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/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}
diff --git a/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx b/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
index 10d4837aa2..a20c3d42bc 100644
--- a/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -1,10 +1,10 @@
-import { Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtom } from 'jotai';
 import type { CSSProperties } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { pageSettingFamily } from '../../../atoms';
 import type { BlockSuiteWorkspace } from '../../../shared';
@@ -21,12 +21,12 @@ export type EditorModeSwitchProps = {
 const TooltipContent = () => {
   const t = useAFFiNEI18N();
   return (
-    <div>
+    <>
       {t['Switch']()}
       <StyledKeyboardItem>
         {!environment.isServer && environment.isMacOs ? '⌥ + S' : 'Alt + S'}
       </StyledKeyboardItem>
-    </div>
+    </>
   );
 };
 export const EditorModeSwitch = ({
@@ -40,6 +40,7 @@ export const EditorModeSwitch = ({
     meta => meta.id === pageId
   );
   const t = useAFFiNEI18N();
+  const ref = useRef(null);
   assertExists(pageMeta);
   const { trash } = pageMeta;
   useEffect(() => {
@@ -70,11 +71,17 @@ export const EditorModeSwitch = ({
   }, [setSetting, t, trash]);
 
   return (
-    <Tooltip content={<TooltipContent />}>
+    <Tooltip
+      content={<TooltipContent />}
+      portalOptions={{
+        container: ref.current,
+      }}
+    >
       <StyledEditorModeSwitch
         style={style}
         switchLeft={currentMode === 'page'}
         showAlone={trash}
+        ref={ref}
       >
         <PageSwitchItem
           data-testid="switch-page-mode-button"
diff --git a/apps/core/src/components/pure/help-island/index.tsx b/apps/core/src/components/pure/help-island/index.tsx
index 81196a3675..020ff4571f 100644
--- a/apps/core/src/components/pure/help-island/index.tsx
+++ b/apps/core/src/components/pure/help-island/index.tsx
@@ -1,6 +1,7 @@
-import { MuiFade, Tooltip } from '@affine/component';
+import { MuiFade } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useSetAtom } from 'jotai/react';
 import { useAtomValue } from 'jotai/react';
 import { useCallback, useState } from 'react';
@@ -60,11 +61,7 @@ export const HelpIsland = ({
           style={{ height: spread ? `${showList.length * 40 + 4}px` : 0 }}
         >
           {showList.includes('whatNew') && (
-            <Tooltip
-              content={t["Discover what's new!"]()}
-              placement="left-end"
-              showArrow={true}
-            >
+            <Tooltip content={t["Discover what's new!"]()} side="left">
               <StyledIconWrapper
                 data-testid="right-bottom-change-log-icon"
                 onClick={() => {
@@ -76,11 +73,7 @@ export const HelpIsland = ({
             </Tooltip>
           )}
           {showList.includes('contact') && (
-            <Tooltip
-              content={t['Contact Us']()}
-              placement="left-end"
-              showArrow={true}
-            >
+            <Tooltip content={t['Contact Us']()} side="left">
               <StyledIconWrapper
                 data-testid="right-bottom-contact-us-icon"
                 onClick={openAbout}
@@ -90,11 +83,7 @@ export const HelpIsland = ({
             </Tooltip>
           )}
           {showList.includes('shortcuts') && (
-            <Tooltip
-              content={t['Keyboard Shortcuts']()}
-              placement="left-end"
-              showArrow={true}
-            >
+            <Tooltip content={t['Keyboard Shortcuts']()} side="left">
               <StyledIconWrapper
                 data-testid="shortcuts-icon"
                 onClick={() => {
@@ -109,8 +98,7 @@ export const HelpIsland = ({
           {showList.includes('guide') && (
             <Tooltip
               content={t['com.affine.helpIsland.gettingStarted']()}
-              placement="left-end"
-              showArrow={true}
+              side="left"
             >
               <StyledIconWrapper
                 data-testid="easy-guide"
@@ -125,11 +113,7 @@ export const HelpIsland = ({
           )}
         </StyledAnimateWrapper>
 
-        <Tooltip
-          content={t['Help and Feedback']()}
-          placement={'left-end'}
-          showArrow={true}
-        >
+        <Tooltip content={t['Help and Feedback']()} side="left">
           <MuiFade in={!spread} data-testid="faq-icon">
             <StyledTriggerWrapper>
               <HelpIcon />
diff --git a/apps/storybook/src/stories/card.stories.tsx b/apps/storybook/src/stories/card.stories.tsx
index 1d73578cba..8602e61c48 100644
--- a/apps/storybook/src/stories/card.stories.tsx
+++ b/apps/storybook/src/stories/card.stories.tsx
@@ -1,4 +1,4 @@
-import { toast, Tooltip } from '@affine/component';
+import { toast } from '@affine/component';
 import { BlockCard } from '@affine/component/card/block-card';
 import { WorkspaceCard } from '@affine/component/card/workspace-card';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -10,6 +10,7 @@ import {
   PageIcon,
 } from '@blocksuite/icons';
 import type { Meta } from '@storybook/react';
+import { Tooltip } from '@toeverything/components/tooltip';
 
 export default {
   title: 'AFFiNE/Card',
diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
index 31c4802ca0..3fbad8e844 100644
--- a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
+++ b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
@@ -1,7 +1,7 @@
-import { Tooltip } from '@affine/component';
 import { isBrowser, Unreachable } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons';
+import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { startTransition, useCallback, useState } from 'react';
@@ -115,7 +115,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
     }
 
     return (
-      <Tooltip content={tooltip} placement="top-start">
+      <Tooltip content={tooltip} side="top">
         {node}
       </Tooltip>
     );
diff --git a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
index 15b7f4791a..86da68a339 100644
--- a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
+++ b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
@@ -1,14 +1,16 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SidebarIcon } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useAtom } from 'jotai';
+import { useRef } from 'react';
 
-import { Tooltip } from '../../../';
 import { appSidebarOpenAtom } from '../index.jotai';
 
 export const SidebarSwitch = () => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
+  const ref = useRef(null);
   const tooltipContent = open ? t['Collapse sidebar']() : t['Expand sidebar']();
   const collapseKeyboardShortcuts =
     environment.isBrowser && environment.isMacOs ? ' ⌘+/' : ' Ctrl+/';
@@ -16,8 +18,10 @@ export const SidebarSwitch = () => {
   return (
     <Tooltip
       content={tooltipContent + ' ' + collapseKeyboardShortcuts}
-      placement="right"
-      zIndex={1000}
+      side="right"
+      portalOptions={{
+        container: ref.current,
+      }}
     >
       <IconButton
         size="large"
@@ -26,6 +30,7 @@ export const SidebarSwitch = () => {
           zIndex: 1,
         }}
         onClick={() => setOpen(open => !open)}
+        ref={ref}
       >
         <SidebarIcon />
       </IconButton>
diff --git a/packages/component/src/components/import-page/index.tsx b/packages/component/src/components/import-page/index.tsx
index e78b6a58fa..1f2e85409a 100644
--- a/packages/component/src/components/import-page/index.tsx
+++ b/packages/component/src/components/import-page/index.tsx
@@ -5,9 +5,9 @@ import {
   NewIcon,
   NotionIcon,
 } from '@blocksuite/icons';
+import { Tooltip } from '@toeverything/components/tooltip';
 
 import { ModalCloseButton } from '../../ui/modal';
-import { Tooltip } from '../../ui/tooltip';
 import { BlockCard } from '../card/block-card';
 import {
   importPageBodyStyle,
@@ -58,7 +58,6 @@ export const ImportPage = ({
         right={
           <Tooltip
             content={'Learn how to Import your Notion pages into AFFiNE.'}
-            placement="top-start"
           >
             <HelpIcon width={20} height={20} />
           </Tooltip>
diff --git a/packages/component/src/components/page-list/components/favorite-tag.tsx b/packages/component/src/components/page-list/components/favorite-tag.tsx
index bf05156789..6cecdb7818 100644
--- a/packages/component/src/components/page-list/components/favorite-tag.tsx
+++ b/packages/component/src/components/page-list/components/favorite-tag.tsx
@@ -4,10 +4,9 @@ import {
   IconButton,
   type IconButtonProps,
 } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { forwardRef } from 'react';
 
-import { Tooltip } from '../../..';
-
 export const FavoriteTag = forwardRef<
   HTMLButtonElement,
   {
@@ -16,10 +15,7 @@ export const FavoriteTag = forwardRef<
 >(({ active, onClick, ...props }, ref) => {
   const t = useAFFiNEI18N();
   return (
-    <Tooltip
-      content={active ? t['Favorited']() : t['Favorite']()}
-      placement="top-start"
-    >
+    <Tooltip content={active ? t['Favorited']() : t['Favorite']()} side="top">
       <IconButton
         ref={ref}
         active={active}
diff --git a/packages/component/src/components/page-list/operation-cell.tsx b/packages/component/src/components/page-list/operation-cell.tsx
index 7f47ab02db..bca48006cc 100644
--- a/packages/component/src/components/page-list/operation-cell.tsx
+++ b/packages/component/src/components/page-list/operation-cell.tsx
@@ -9,9 +9,10 @@ import {
   ResetIcon,
 } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useState } from 'react';
 
-import { Confirm, FlexWrapper, Menu, MenuItem, Tooltip } from '../../..';
+import { Confirm, FlexWrapper, Menu, MenuItem } from '../../..';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
 
 export interface OperationCellProps {
@@ -125,7 +126,7 @@ export const TrashOperationCell = ({
   const [open, setOpen] = useState(false);
   return (
     <FlexWrapper>
-      <Tooltip content={t['Restore it']()} placement="top-start">
+      <Tooltip content={t['Restore it']()} side="top">
         <IconButton
           style={{ marginRight: '12px' }}
           onClick={() => {
@@ -135,7 +136,7 @@ export const TrashOperationCell = ({
           <ResetIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip content={t['Delete permanently']()} placement="top-start">
+      <Tooltip content={t['Delete permanently']()} side="top" align="end">
         <IconButton
           onClick={() => {
             setOpen(true);
diff --git a/packages/component/src/components/page-list/view/collection-bar.tsx b/packages/component/src/components/page-list/view/collection-bar.tsx
index e73c3ac0eb..94462c2c47 100644
--- a/packages/component/src/components/page-list/view/collection-bar.tsx
+++ b/packages/component/src/components/page-list/view/collection-bar.tsx
@@ -1,10 +1,10 @@
-import { Tooltip } from '@affine/component';
 import { EditCollectionModel } from '@affine/component/page-list';
 import type { PropertiesMeta } from '@affine/env/filter';
 import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ViewLayersIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 
@@ -53,7 +53,9 @@ export const CollectionBar = (props: CollectionBarProps) => {
           />
           <Tooltip
             content={setting.currentCollection.name}
-            pointerEnterDelay={1500}
+            rootOptions={{
+              delayDuration: 1500,
+            }}
           >
             <div
               style={{
@@ -68,11 +70,7 @@ export const CollectionBar = (props: CollectionBarProps) => {
           </Tooltip>
           {actions.map(action => {
             return (
-              <Tooltip
-                key={action.name}
-                content={action.tooltip}
-                placement="top-start"
-              >
+              <Tooltip key={action.name} content={action.tooltip}>
                 <div
                   data-testid={`collection-bar-option-${action.name}`}
                   onClick={action.click}
diff --git a/packages/component/src/components/page-list/view/collection-list.tsx b/packages/component/src/components/page-list/view/collection-list.tsx
index fc47f87a6a..e598fb8b84 100644
--- a/packages/component/src/components/page-list/view/collection-list.tsx
+++ b/packages/component/src/components/page-list/view/collection-list.tsx
@@ -6,11 +6,12 @@ import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilteredIcon, FolderIcon, ViewLayersIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
 import type { MouseEvent } from 'react';
 import { useCallback, useState } from 'react';
 
-import { MenuItem, Tooltip } from '../../..';
+import { MenuItem } from '../../..';
 import Menu from '../../../ui/menu/menu';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
@@ -46,8 +47,10 @@ const CollectionOption = ({
     >
       <Tooltip
         content={collection.name}
-        placement="right"
-        pointerEnterDelay={1500}
+        side="right"
+        rootOptions={{
+          delayDuration: 1500,
+        }}
       >
         <div
           style={{
@@ -171,7 +174,9 @@ export const CollectionList = ({
           >
             <Tooltip
               content={setting.currentCollection.name}
-              pointerEnterDelay={1500}
+              rootOptions={{
+                delayDuration: 1500,
+              }}
             >
               <>{setting.currentCollection.name}</>
             </Tooltip>
diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts
index 89553d897a..3e00c03a91 100644
--- a/packages/component/src/index.ts
+++ b/packages/component/src/index.ts
@@ -15,5 +15,4 @@ export * from './ui/shared/container';
 export * from './ui/switch';
 export * from './ui/table';
 export * from './ui/toast';
-export * from './ui/tooltip';
 export * from './ui/tree-view';
diff --git a/packages/component/src/ui/tooltip/index.tsx b/packages/component/src/ui/tooltip/index.tsx
deleted file mode 100644
index ed8326d5e7..0000000000
--- a/packages/component/src/ui/tooltip/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tooltip';
diff --git a/packages/component/src/ui/tooltip/tooltip.tsx b/packages/component/src/ui/tooltip/tooltip.tsx
deleted file mode 100644
index f44d9facf7..0000000000
--- a/packages/component/src/ui/tooltip/tooltip.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { NoSsr } from '@mui/material';
-import type { ReactElement } from 'react';
-
-import { styled } from '../../styles';
-import { Popper, type PopperProps } from '../popper';
-import StyledPopperContainer from '../shared/container';
-
-const StyledTooltip = styled(StyledPopperContainer)(() => {
-  return {
-    display: 'inline-flex',
-    minHeight: '38px',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexShrink: 0,
-    backgroundColor: 'var(--affine-tooltip)',
-    borderRadius: '4px',
-    color: 'var(--affine-white)',
-    padding: '5px 12px',
-  };
-});
-
-interface TooltipProps {
-  content: string | ReactElement<any, any>;
-  placement?: PopperProps['placement'];
-  children: ReactElement<any, any>;
-}
-export const Tooltip = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
-  const { content, placement = 'top-start', children } = props;
-  return (
-    <NoSsr>
-      <Popper
-        {...props}
-        content={<StyledTooltip placement={placement}>{content}</StyledTooltip>}
-      >
-        {children}
-      </Popper>
-    </NoSsr>
-  );
-};
diff --git a/plugins/copilot/package.json b/plugins/copilot/package.json
index cc789a1923..0a9a75e22f 100644
--- a/plugins/copilot/package.json
+++ b/plugins/copilot/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
-    "@toeverything/components": "^0.0.17",
+    "@toeverything/components": "^0.0.19",
     "idb": "^7.1.1",
     "langchain": "^0.0.134",
     "marked": "^7.0.4",
diff --git a/plugins/copilot/src/UI/header-item.tsx b/plugins/copilot/src/UI/header-item.tsx
index 1e6f954fa2..8dc7ea7ac7 100644
--- a/plugins/copilot/src/UI/header-item.tsx
+++ b/plugins/copilot/src/UI/header-item.tsx
@@ -1,7 +1,7 @@
-import { Tooltip } from '@affine/component';
 import { deleteLayoutAtom, pushLayoutAtom } from '@affine/sdk/entry';
 import { AiIcon } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useSetAtom } from 'jotai';
 import type { ComponentType, PropsWithChildren, ReactElement } from 'react';
 import { useCallback, useState } from 'react';
@@ -18,7 +18,7 @@ export const HeaderItem = ({
   const pushLayout = useSetAtom(pushLayoutAtom);
   const deleteLayout = useSetAtom(deleteLayoutAtom);
   return (
-    <Tooltip content="Chat with AI" placement="bottom-end">
+    <Tooltip content="Chat with AI" side="bottom">
       <IconButton
         onClick={useCallback(() => {
           if (!open) {
diff --git a/plugins/hello-world/package.json b/plugins/hello-world/package.json
index e5a16e1a62..51c5c81029 100644
--- a/plugins/hello-world/package.json
+++ b/plugins/hello-world/package.json
@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "^2.1.31",
-    "@toeverything/components": "^0.0.17"
+    "@toeverything/components": "^0.0.19"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*"
diff --git a/plugins/hello-world/src/app.tsx b/plugins/hello-world/src/app.tsx
index f1e36ce5fc..8639b900a8 100644
--- a/plugins/hello-world/src/app.tsx
+++ b/plugins/hello-world/src/app.tsx
@@ -1,6 +1,6 @@
-import { Tooltip } from '@affine/component';
 import { Logo1Icon } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useCallback } from 'react';
 
 export const HeaderItem = () => {
diff --git a/plugins/image-preview/package.json b/plugins/image-preview/package.json
index ec5943c62e..851eec59f3 100644
--- a/plugins/image-preview/package.json
+++ b/plugins/image-preview/package.json
@@ -17,7 +17,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "^2.1.31",
-    "@toeverything/components": "^0.0.17",
+    "@toeverything/components": "^0.0.19",
     "@toeverything/theme": "^0.7.12",
     "clsx": "^2.0.0",
     "foxact": "^0.2.20",
diff --git a/plugins/image-preview/src/component/index.tsx b/plugins/image-preview/src/component/index.tsx
index 3de57c2bb1..14fa304fa4 100644
--- a/plugins/image-preview/src/component/index.tsx
+++ b/plugins/image-preview/src/component/index.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from '@affine/component';
 import type { ImageBlockModel } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import {
@@ -13,6 +12,7 @@ import {
 } from '@blocksuite/icons';
 import type { Workspace } from '@blocksuite/store';
 import { Button, IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
 import { useErrorBoundary } from 'foxact/use-error-boundary';
 import { useAtom } from 'jotai';
@@ -336,7 +336,7 @@ const ImagePreviewModalImpl = (
         ) : null}
         <div className={imagePreviewActionBarStyle}>
           <div>
-            <Tooltip content={'Previous'} placement={'top'} showArrow={true}>
+            <Tooltip content={'Previous'}>
               <IconButton
                 data-testid="previous-image-button"
                 icon={<ArrowLeftSmallIcon />}
@@ -348,7 +348,7 @@ const ImagePreviewModalImpl = (
                 }}
               />
             </Tooltip>
-            <Tooltip content={'Next'} placement={'top'} showArrow={true}>
+            <Tooltip content={'Next'}>
               <IconButton
                 data-testid="next-image-button"
                 icon={<ArrowRightSmallIcon />}
@@ -362,7 +362,7 @@ const ImagePreviewModalImpl = (
             </Tooltip>
           </div>
           <div className={groupStyle}></div>
-          <Tooltip content={'Fit to Screen'} placement={'top'} showArrow={true}>
+          <Tooltip content={'Fit to Screen'}>
             <IconButton
               data-testid="fit-to-screen-button"
               icon={<ViewBarIcon />}
@@ -371,7 +371,7 @@ const ImagePreviewModalImpl = (
               onClick={() => resetZoom()}
             />
           </Tooltip>
-          <Tooltip content={'Zoom out'} placement={'top'} showArrow={true}>
+          <Tooltip content={'Zoom out'}>
             <IconButton
               data-testid="zoom-out-button"
               icon={<MinusIcon />}
@@ -380,7 +380,7 @@ const ImagePreviewModalImpl = (
               onClick={zoomOut}
             />
           </Tooltip>
-          <Tooltip content={'Reset Scale'} placement={'top'} showArrow={true}>
+          <Tooltip content={'Reset Scale'}>
             <Button
               data-testid="reset-scale-button"
               type="plain"
@@ -391,7 +391,7 @@ const ImagePreviewModalImpl = (
               {`${(currentScale * 100).toFixed(0)}%`}
             </Button>
           </Tooltip>
-          <Tooltip content={'Zoom in'} placement={'top'} showArrow={true}>
+          <Tooltip content={'Zoom in'}>
             <IconButton
               data-testid="zoom-in-button"
               icon={<PlusIcon />}
@@ -401,7 +401,7 @@ const ImagePreviewModalImpl = (
             />
           </Tooltip>
           <div className={groupStyle}></div>
-          <Tooltip content={'Download'} placement={'top'} showArrow={true}>
+          <Tooltip content={'Download'}>
             <IconButton
               data-testid="download-button"
               icon={<DownloadIcon />}
@@ -415,11 +415,7 @@ const ImagePreviewModalImpl = (
               }}
             />
           </Tooltip>
-          <Tooltip
-            content={'Copy to clipboard'}
-            placement={'top'}
-            showArrow={true}
-          >
+          <Tooltip content={'Copy to clipboard'}>
             <IconButton
               data-testid="copy-to-clipboard-button"
               icon={<CopyIcon />}
@@ -460,7 +456,7 @@ const ImagePreviewModalImpl = (
             />
           </Tooltip>
           <div className={groupStyle}></div>
-          <Tooltip content={'Delete'} placement={'top'} showArrow={true}>
+          <Tooltip content={'Delete'}>
             <IconButton
               data-testid="delete-button"
               icon={<DeleteIcon />}
diff --git a/plugins/outline/package.json b/plugins/outline/package.json
index 3e020af2b4..2c9021e255 100644
--- a/plugins/outline/package.json
+++ b/plugins/outline/package.json
@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "^2.1.31",
-    "@toeverything/components": "^0.0.17"
+    "@toeverything/components": "^0.0.19"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*",
diff --git a/plugins/outline/src/app.tsx b/plugins/outline/src/app.tsx
index 2e3deca44e..55e6736c5f 100644
--- a/plugins/outline/src/app.tsx
+++ b/plugins/outline/src/app.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from '@affine/component';
 import {
   currentPageAtom,
   deleteLayoutAtom,
@@ -8,6 +7,7 @@ import { TOCNotesPanel } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import { RightSidebarIcon } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useAtomValue, useSetAtom } from 'jotai';
 import type { ComponentType, PropsWithChildren } from 'react';
 import { useCallback, useRef, useState } from 'react';
diff --git a/yarn.lock b/yarn.lock
index 04ab54761c..a8f80778d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -196,7 +196,7 @@ __metadata:
     "@affine/component": "workspace:*"
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
-    "@toeverything/components": ^0.0.17
+    "@toeverything/components": ^0.0.19
     "@types/marked": ^5.0.1
     idb: ^7.1.1
     jotai: ^2.4.0
@@ -246,7 +246,7 @@ __metadata:
     "@sentry/webpack-plugin": ^2.7.0
     "@svgr/webpack": ^8.1.0
     "@swc/core": ^1.3.80
-    "@toeverything/components": ^0.0.17
+    "@toeverything/components": ^0.0.19
     "@types/lodash.debounce": ^4.0.7
     "@types/webpack-env": ^1.18.1
     async-call-rpc: ^6.3.1
@@ -417,7 +417,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.31
-    "@toeverything/components": ^0.0.17
+    "@toeverything/components": ^0.0.19
   languageName: unknown
   linkType: soft
 
@@ -443,7 +443,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.31
-    "@toeverything/components": ^0.0.17
+    "@toeverything/components": ^0.0.19
     "@toeverything/theme": ^0.7.12
     clsx: ^2.0.0
     foxact: ^0.2.20
@@ -562,7 +562,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.31
-    "@toeverything/components": ^0.0.17
+    "@toeverything/components": ^0.0.19
     jotai: ^2.4.0
     react: 18.2.0
     react-dom: 18.2.0
@@ -9137,6 +9137,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-tooltip@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@radix-ui/react-tooltip@npm:1.0.6"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-dismissable-layer": 1.0.4
+    "@radix-ui/react-id": 1.0.1
+    "@radix-ui/react-popper": 1.1.2
+    "@radix-ui/react-portal": 1.0.3
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/react-visually-hidden": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 8220f103432e9ad9ff8a828ca890e14bf3323864a0bb145d1ef689cf446ab5ca0af18e5fed5da89db957065c504e79ec12fbe5e551d6e7b84b470fbd672c918d
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.0.0":
   version: 1.0.0
   resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
@@ -11700,17 +11731,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/components@npm:^0.0.17":
-  version: 0.0.17
-  resolution: "@toeverything/components@npm:0.0.17"
+"@toeverything/components@npm:^0.0.19":
+  version: 0.0.19
+  resolution: "@toeverything/components@npm:0.0.19"
   dependencies:
     "@blocksuite/icons": ^2.1.30
+    "@radix-ui/react-tooltip": ^1.0.6
   peerDependencies:
     "@radix-ui/react-avatar": ^1
     clsx: ^2
     react: ^18
     react-dom: ^18
-  checksum: 3dc1eb4a8f7aebc8423f7ac1dda0f51db892ea25922b0c8b2d5f81bd987030fac796ac6950f364d3591e68ee3b19cf80bf0add02ecaff631c920a32440e1981b
+  checksum: 705bd025d958866b4615348cd6b127e305fd8c0a837a024da82fda2f5dad8d9aaa26f939956ec52bfca404fa2086cc15d6ae08b2eb75e26db2651798c1bfe766
   languageName: node
   linkType: hard