feat: replace tooltip with new design (#3969)

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