feat: add tooltip to scroll button

This commit is contained in:
MAZE 2023-11-01 17:42:23 +03:30
parent 262bb1a9c6
commit d4401faaff
2 changed files with 15 additions and 12 deletions

View File

@ -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
animate="show"
aria-label="Scroll to top"
className={styles.button}
exit="hidden"
initial="hidden"
variants={variants}
onClick={scrollToTop}
>
<BiUpArrowAlt />
</motion.button>
<Tooltip content="Scroll to top" hideDelay={0} showDelay={0}>
<motion.button
animate="show"
aria-label="Scroll to top"
className={styles.button}
exit="hidden"
initial="hidden"
variants={variants}
onClick={scrollToTop}
>
<BiUpArrowAlt />
</motion.button>
</Tooltip>
)}
</AnimatePresence>
);

View File

@ -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,