feat: replace tooltip with new design (#3969)

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

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>

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>

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>

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

packages/component/src/ui/tooltip/index.tsx

@@ -1 +0,0 @@
-export * from './tooltip';

packages/component/src/ui/tooltip/tooltip.tsx

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