mirror of
https://github.com/remvze/moodist.git
synced 2025-09-29 15:30:49 -04:00
feat: add tooltip to scroll button
This commit is contained in:
parent
262bb1a9c6
commit
d4401faaff
@ -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>
|
||||
);
|
||||
|
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user