feat: replace tooltip with new design (#3969)

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}

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

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}

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>