diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 0adfb3a7b43265..8fdcea8f191e5d 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -1,5 +1,6 @@
 'use client';
 import {MoonIcon, SunIcon} from '@radix-ui/react-icons';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import {IconButton, Tooltip} from '@radix-ui/themes';
 import {useTheme} from 'next-themes';
 import {Fragment} from 'react';
@@ -22,32 +23,34 @@ export function ThemeToggle({
      }
    `}</style>
 
-      <Tooltip className="radix-themes-custom-fonts" content="Toggle theme">
-        <IconButton
-          size="3"
-          variant="ghost"
-          color="gray"
-          onClick={() => {
-            // Set 'system' theme if the next theme matches the system theme
-            const resolvedTheme = theme === 'system' ? systemTheme : theme;
-            const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-            const newThemeMatchesSystem = newTheme === systemTheme;
-            setTheme(newThemeMatchesSystem ? 'system' : newTheme);
-          }}
-          {...props}
-        >
-          <SunIcon
-            width="16"
-            height="16"
-            style={{display: 'var(--theme-toggle-sun-icon-display)'}}
-          />
-          <MoonIcon
-            width="16"
-            height="16"
-            style={{display: 'var(--theme-toggle-moon-icon-display)'}}
-          />
-        </IconButton>
-      </Tooltip>
+      <TooltipPrimitive.Provider delayDuration={300}>
+        <Tooltip className="radix-themes-custom-fonts" content="Toggle theme">
+          <IconButton
+            size="3"
+            variant="ghost"
+            color="gray"
+            onClick={() => {
+              // Set 'system' theme if the next theme matches the system theme
+              const resolvedTheme = theme === 'system' ? systemTheme : theme;
+              const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
+              const newThemeMatchesSystem = newTheme === systemTheme;
+              setTheme(newThemeMatchesSystem ? 'system' : newTheme);
+            }}
+            {...props}
+          >
+            <SunIcon
+              width="16"
+              height="16"
+              style={{display: 'var(--theme-toggle-sun-icon-display)'}}
+            />
+            <MoonIcon
+              width="16"
+              height="16"
+              style={{display: 'var(--theme-toggle-moon-icon-display)'}}
+            />
+          </IconButton>
+        </Tooltip>
+      </TooltipPrimitive.Provider>
     </Fragment>
   );
 }