diff --git a/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx b/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx
index 85fe7640f..8cfe73f02 100644
--- a/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx
+++ b/packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.tsx
@@ -2,7 +2,15 @@ import { Button } from '@affine/component';
 
 import * as styles from './animate-in-tooltip.css';
 
-export const AnimateInTooltip = ({ onNext }: { onNext: () => void }) => {
+interface AnimateInTooltipProps {
+  onNext: () => void;
+  visible?: boolean;
+}
+
+export const AnimateInTooltip = ({
+  onNext,
+  visible,
+}: AnimateInTooltipProps) => {
   return (
     <>
       <div className={styles.tooltip}>
@@ -10,9 +18,11 @@ export const AnimateInTooltip = ({ onNext }: { onNext: () => void }) => {
         whiteboards and databases
       </div>
       <div className={styles.next}>
-        <Button type="primary" size="extraLarge" onClick={onNext}>
-          Next
-        </Button>
+        {visible ? (
+          <Button type="primary" size="extraLarge" onClick={onNext}>
+            Next
+          </Button>
+        ) : null}
       </div>
     </>
   );
diff --git a/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx b/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
index 1c48e0af8..9a0751c5a 100644
--- a/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
+++ b/packages/frontend/core/src/components/affine/onboarding/onboarding.tsx
@@ -34,6 +34,11 @@ export const Onboarding = ({ onOpenApp }: OnboardingProps) => {
     });
   }, []);
 
+  const onTooltipNext = useCallback(() => {
+    if (status.activeId) return;
+    setStatus({ activeId: null, unfoldingId: '4' });
+  }, [status.activeId]);
+
   return (
     <div
       className={styles.onboarding}
@@ -80,9 +85,7 @@ export const Onboarding = ({ onOpenApp }: OnboardingProps) => {
         )}
 
         <div className={styles.tipsWrapper} data-visible={!status.activeId}>
-          <AnimateInTooltip
-            onNext={() => setStatus({ activeId: null, unfoldingId: '4' })}
-          />
+          <AnimateInTooltip onNext={onTooltipNext} visible={!status.activeId} />
         </div>
       </div>
     </div>