fix: tooltip arrow (#3769)

Co-authored-by: Alex Yang <himself65@outlook.com>

apps/core/src/components/pure/help-island/index.tsx

@@ -60,7 +60,11 @@ 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">
+            <Tooltip
+              content={t["Discover what's new!"]()}
+              placement="left-end"
+              showArrow={true}
+            >
               <StyledIconWrapper
                 data-testid="right-bottom-change-log-icon"
                 onClick={() => {
@@ -72,7 +76,11 @@ export const HelpIsland = ({
             </Tooltip>
           )}
           {showList.includes('contact') && (
-            <Tooltip content={t['Contact Us']()} placement="left-end">
+            <Tooltip
+              content={t['Contact Us']()}
+              placement="left-end"
+              showArrow={true}
+            >
               <StyledIconWrapper
                 data-testid="right-bottom-contact-us-icon"
                 onClick={openAbout}
@@ -82,7 +90,11 @@ export const HelpIsland = ({
             </Tooltip>
           )}
           {showList.includes('shortcuts') && (
-            <Tooltip content={t['Keyboard Shortcuts']()} placement="left-end">
+            <Tooltip
+              content={t['Keyboard Shortcuts']()}
+              placement="left-end"
+              showArrow={true}
+            >
               <StyledIconWrapper
                 data-testid="shortcuts-icon"
                 onClick={() => {
@@ -98,6 +110,7 @@ export const HelpIsland = ({
             <Tooltip
               content={t['com.affine.helpIsland.gettingStarted']()}
               placement="left-end"
+              showArrow={true}
             >
               <StyledIconWrapper
                 data-testid="easy-guide"
@@ -112,7 +125,11 @@ export const HelpIsland = ({
           )}
         </StyledAnimateWrapper>
 
-        <Tooltip content={t['Help and Feedback']()} placement="left-end">
+        <Tooltip
+          content={t['Help and Feedback']()}
+          placement={'left-end'}
+          showArrow={true}
+        >
           <MuiFade in={!spread} data-testid="faq-icon">
             <StyledTriggerWrapper>
               <HelpIcon />

packages/component/src/components/workspace/index.css.ts

@@ -103,6 +103,9 @@ export const toolStyle = style({
   right: '30px',
   bottom: '30px',
   zIndex: 'var(--affine-z-index-popover)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
   '@media': {
     [breakpoints.down('md', true)]: {
       right: 'calc((100vw - 640px) * 3 / 19 + 14px)',

packages/component/src/ui/popper/popper.tsx

@@ -13,7 +13,6 @@ import {
 
 import { styled } from '../../styles';
 import type { PopperProps, VirtualElement } from './interface';
-import { PopperArrow } from './popover-arrow';
 export const Popper = ({
   children,
   content,
@@ -41,7 +40,8 @@ export const Popper = ({
 }: PopperProps) => {
   const [anchorEl, setAnchorEl] = useState<VirtualElement>();
   const [visible, setVisible] = useState(defaultVisible);
-  const [arrowRef, setArrowRef] = useState<HTMLElement>();
+  //const [arrowRef, setArrowRef] = useState<HTMLElement>();
+  const arrowRef = null;
   const pointerLeaveTimer = useRef<number>();
   const pointerEnterTimer = useRef<number>();
 
@@ -170,12 +170,111 @@ export const Popper = ({
                     }
                   }}
                 >
-                  {showArrow && (
+                  {showArrow ? (
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    <>
-                    // @ts-ignore
+                      {placement.indexOf('bottom') === 0 ? (
-                    <PopperArrow placement={placement} ref={setArrowRef} />
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                          }}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="11"
+                            height="6"
+                            viewBox="0 0 11 6"
+                            fill="none"
+                          >
+                            <path
+                              d="M6.38889 0.45C5.94444 -0.15 5.05555 -0.150001 4.61111 0.449999L0.499999 6L10.5 6L6.38889 0.45Z"
+                              style={{ fill: 'var(--affine-tooltip)' }}
+                            />
+                          </svg>
+                          {content}
+                        </div>
+                      ) : placement.indexOf('top') === 0 ? (
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                          }}
+                        >
+                          {content}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="11"
+                            height="6"
+                            viewBox="0 0 11 6"
+                            fill="none"
+                          >
+                            <path
+                              d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
+                              style={{ fill: 'var(--affine-tooltip)' }}
+                            />
+                          </svg>
+                        </div>
+                      ) : placement.indexOf('left') === 0 ? (
+                        <>
+                          {content}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="6"
+                            height="10"
+                            viewBox="0 0 6 10"
+                            fill="none"
+                          >
+                            <path
+                              d="M5.55 5.88889C6.15 5.44444 6.15 4.55555 5.55 4.11111L-4.76837e-07 0L-4.76837e-07 10L5.55 5.88889Z"
+                              style={{ fill: 'var(--affine-tooltip)' }}
+                            />
+                          </svg>
+                        </>
+                      ) : placement.indexOf('right') === 0 ? (
+                        <>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="6"
+                            height="10"
+                            viewBox="0 0 6 10"
+                            style={{ fill: 'var(--affine-tooltip)' }}
+                          >
+                            <path
+                              d="M0.45 4.11111C-0.15 4.55556 -0.15 5.44445 0.45 5.88889L6 10V0L0.45 4.11111Z"
+                              style={{ fill: 'var(--affine-tooltip)' }}
+                            />
+                          </svg>
+                          {content}
+                        </>
+                      ) : (
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                          }}
+                        >
+                          {content}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="11"
+                            height="6"
+                            viewBox="0 0 11 6"
+                            fill="none"
+                          >
+                            <path
+                              d="M4.61111 5.55C5.05556 6.15 5.94445 6.15 6.38889 5.55L10.5 -4.76837e-07H0.5L4.61111 5.55Z"
+                              style={{ fill: 'var(--affine-tooltip)' }}
+                            />
+                          </svg>
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <>{content}</>
                   )}
-                  {content}
                 </div>
               </Grow>
             )}

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

@@ -7,15 +7,16 @@ import StyledPopperContainer from '../shared/container';
 
 const StyledTooltip = styled(StyledPopperContainer)(() => {
   return {
-    maxWidth: '320px',
+    display: 'inline-flex',
-    boxShadow: 'var(--affine-float-button-shadow)',
+    height: '38px',
-    padding: '4px 12px',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
     backgroundColor: 'var(--affine-tooltip)',
+    borderRadius: '4px',
     color: 'var(--affine-white)',
-    fontSize: 'var(--affine-font-sm)',
+    padding: '5px 12px',
-    borderRadius: '8px',
-    marginBottom: '12px',
-    overflowWrap: 'break-word',
   };
 });
 

plugins/image-preview/src/component/index.tsx

@@ -336,7 +336,7 @@ const ImagePreviewModalImpl = (
         ) : null}
         <div className={imagePreviewActionBarStyle}>
           <div>
-            <Tooltip content={'Previous'} disablePortal={false}>
+            <Tooltip content={'Previous'} placement={'top'} showArrow={true}>
               <IconButton
                 data-testid="previous-image-button"
                 icon={<ArrowLeftSmallIcon />}
@@ -348,7 +348,7 @@ const ImagePreviewModalImpl = (
                 }}
               />
             </Tooltip>
-            <Tooltip content={'Next'} disablePortal={false}>
+            <Tooltip content={'Next'} placement={'top'} showArrow={true}>
               <IconButton
                 data-testid="next-image-button"
                 icon={<ArrowRightSmallIcon />}
@@ -362,11 +362,7 @@ const ImagePreviewModalImpl = (
             </Tooltip>
           </div>
           <div className={groupStyle}></div>
-          <Tooltip
+          <Tooltip content={'Fit to Screen'} placement={'top'} showArrow={true}>
-            content={'Fit to Screen'}
-            disablePortal={true}
-            showArrow={false}
-          >
             <IconButton
               data-testid="fit-to-screen-button"
               icon={<ViewBarIcon />}
@@ -375,7 +371,7 @@ const ImagePreviewModalImpl = (
               onClick={() => resetZoom()}
             />
           </Tooltip>
-          <Tooltip content={'Zoom out'} disablePortal={false}>
+          <Tooltip content={'Zoom out'} placement={'top'} showArrow={true}>
             <IconButton
               data-testid="zoom-out-button"
               icon={<MinusIcon />}
@@ -384,7 +380,7 @@ const ImagePreviewModalImpl = (
               onClick={zoomOut}
             />
           </Tooltip>
-          <Tooltip content={'Reset Scale'} disablePortal={false}>
+          <Tooltip content={'Reset Scale'} placement={'top'} showArrow={true}>
             <Button
               data-testid="reset-scale-button"
               type="plain"
@@ -395,7 +391,7 @@ const ImagePreviewModalImpl = (
               {`${(currentScale * 100).toFixed(0)}%`}
             </Button>
           </Tooltip>
-          <Tooltip content={'Zoom in'} disablePortal={false}>
+          <Tooltip content={'Zoom in'} placement={'top'} showArrow={true}>
             <IconButton
               data-testid="zoom-in-button"
               icon={<PlusIcon />}
@@ -405,7 +401,7 @@ const ImagePreviewModalImpl = (
             />
           </Tooltip>
           <div className={groupStyle}></div>
-          <Tooltip content={'Download'} disablePortal={false}>
+          <Tooltip content={'Download'} placement={'top'} showArrow={true}>
             <IconButton
               data-testid="download-button"
               icon={<DownloadIcon />}
@@ -419,7 +415,11 @@ const ImagePreviewModalImpl = (
               }}
             />
           </Tooltip>
-          <Tooltip content={'Copy to clipboard'} disablePortal={false}>
+          <Tooltip
+            content={'Copy to clipboard'}
+            placement={'top'}
+            showArrow={true}
+          >
             <IconButton
               data-testid="copy-to-clipboard-button"
               icon={<CopyIcon />}
@@ -444,7 +444,7 @@ const ImagePreviewModalImpl = (
                     return;
                   }
                   const dataUrl = URL.createObjectURL(blob);
-                  navigator.clipboard
+                  global.navigator.clipboard
                     .write([new ClipboardItem({ 'image/png': blob })])
                     .then(() => {
                       console.log('Image copied to clipboard');
@@ -460,7 +460,7 @@ const ImagePreviewModalImpl = (
             />
           </Tooltip>
           <div className={groupStyle}></div>
-          <Tooltip content={'Delete'} disablePortal={false}>
+          <Tooltip content={'Delete'} placement={'top'} showArrow={true}>
             <IconButton
               data-testid="delete-button"
               icon={<DeleteIcon />}

plugins/image-preview/src/component/toast.ts

@@ -3,7 +3,7 @@ import { toast as basicToast } from '@affine/component';
 
 export const toast = (message: string, options?: ToastOptions) => {
   const mainContainer = document.querySelector(
-    '[data-testid="image-preview-modal"]'
+    '[plugin-id="@affine/image-preview-plugin"]'
   ) as HTMLElement;
   return basicToast(message, {
     portal: mainContainer || document.body,