feat: add tooltip to scroll button

src/components/scroll-to-top/scroll-to-top.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { BiUpArrowAlt } from 'react-icons/bi/index';
 import { motion, AnimatePresence } from 'framer-motion';
 
+import { Tooltip } from '@/components/tooltip';
 import { mix, fade, slideY } from '@/lib/motion';
 
 import styles from './scroll-to-top.module.css';
@@ -32,17 +33,19 @@ export function ScrollToTop() {
   return (
     <AnimatePresence>
       {isVisible && (
-        <motion.button
+        <Tooltip content="Scroll to top" hideDelay={0} showDelay={0}>
-          animate="show"
+          <motion.button
-          aria-label="Scroll to top"
+            animate="show"
-          className={styles.button}
+            aria-label="Scroll to top"
-          exit="hidden"
+            className={styles.button}
-          initial="hidden"
+            exit="hidden"
-          variants={variants}
+            initial="hidden"
-          onClick={scrollToTop}
+            variants={variants}
-        >
+            onClick={scrollToTop}
-          <BiUpArrowAlt />
+          >
-        </motion.button>
+            <BiUpArrowAlt />
+          </motion.button>
+        </Tooltip>
       )}
     </AnimatePresence>
   );

src/components/tooltip/tooltip.tsx

@@ -41,7 +41,7 @@ export function Tooltip({
     placement: computedPlacement,
     refs,
   } = useFloating({
-    middleware: [offset(12), flip(), shift()],
+    middleware: [offset(12), flip(), shift({ padding: 8 })],
     onOpenChange: setIsTooltipOpen,
     open: isTooltipOpen,
     placement: placement,