feat: replace tooltip with new design (#3969)

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",

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) {

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:*"

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 = () => {

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",

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 />}

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:*",

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';