diff --git a/src/packages/tooltip/tooltip.ts b/src/packages/tooltip/tooltip.ts
index 481078a4a..a29c0a326 100644
--- a/src/packages/tooltip/tooltip.ts
+++ b/src/packages/tooltip/tooltip.ts
@@ -302,6 +302,8 @@ export type TooltipProps = {
   hintMode: boolean;
   showStepNumbers: boolean;
 
+  transitionDuration?: number;
+
   // auto-alignment properties
   autoPosition: boolean;
   positionPrecedence: TooltipPosition[];
@@ -314,6 +316,8 @@ export const Tooltip = (
     hintMode = false,
     showStepNumbers = false,
 
+    transitionDuration = 0,
+
     // auto-alignment properties
     autoPosition = true,
     positionPrecedence = [],
@@ -398,12 +402,10 @@ export const Tooltip = (
     ]
   );
 
-  // wait for the helper layer to be rendered before showing the tooltip
-  // this is to prevent the tooltip from flickering when the helper layer is transitioning
-  // the 300ms delay is coming from the helper layer transition duration
+  // apply the transition effect
   setTimeout(() => {
     opacity.val = 1;
-  }, 300);
+  }, transitionDuration);
 
   return tooltip;
 };
diff --git a/src/packages/tour/components/TourRoot.ts b/src/packages/tour/components/TourRoot.ts
index f89eebe27..a74c44463 100644
--- a/src/packages/tour/components/TourRoot.ts
+++ b/src/packages/tour/components/TourRoot.ts
@@ -28,6 +28,9 @@ export const TourRoot = ({ tour }: TourRootProps) => {
   });
 
   const opacity = van.state(0);
+  // render the tooltip immediately when the tour starts
+  // but we reset the transition duration to 300ms when the tooltip is rendered for the first time
+  let tooltipTransitionDuration = 0;
 
   const root = div(
     {
@@ -65,6 +68,8 @@ export const TourRoot = ({ tour }: TourRootProps) => {
         targetElement: tour.getTargetElement(),
         helperElementPadding: tour.getOption("helperElementPadding"),
 
+        transitionDuration: tooltipTransitionDuration,
+
         positionPrecedence: tour.getOption("positionPrecedence"),
         autoPosition: tour.getOption("autoPosition"),
         showStepNumbers: tour.getOption("showStepNumbers"),
@@ -147,6 +152,11 @@ export const TourRoot = ({ tour }: TourRootProps) => {
           })
         : null;
 
+      // wait for the helper layer to be rendered before showing the tooltip
+      // this is to prevent the tooltip from flickering when the helper layer is transitioning
+      // the 300ms delay is coming from the helper layer transition duration
+      tooltipTransitionDuration = 300;
+
       return div(
         overlayLayer,
         referenceLayer,