yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import * as RadixTooltip from "@radix-ui/react-tooltip";
2import { motion } from "motion/react";
3import { memo, type ReactNode } from "react";
4
5interface TooltipProps {
6 children: ReactNode;
7 className?: string;
8 content: ReactNode;
9 placement?: "bottom" | "left" | "right" | "top";
10 withDelay?: boolean;
11}
12
13const Tooltip = ({
14 children,
15 className = "",
16 content,
17 placement = "right",
18 withDelay = false
19}: TooltipProps) => {
20 return (
21 <RadixTooltip.Provider
22 delayDuration={withDelay ? 600 : 0}
23 skipDelayDuration={withDelay ? 0 : 600}
24 >
25 <RadixTooltip.Root>
26 <RadixTooltip.Trigger asChild>
27 <span className={className}>{children}</span>
28 </RadixTooltip.Trigger>
29 <RadixTooltip.Portal>
30 <RadixTooltip.Content
31 asChild
32 className="!rounded-lg !text-xs !leading-6 z-10 hidden bg-gray-700 px-3 py-0.5 text-white tracking-wide sm:block"
33 side={placement}
34 sideOffset={5}
35 >
36 <motion.div
37 animate={{ opacity: 1, scale: 1 }}
38 exit={{ opacity: 0, scale: 0.95 }}
39 initial={{ opacity: 0, scale: 0.95 }}
40 transition={{ duration: 0.35, ease: [0.23, 1, 0.32, 1] }}
41 >
42 <span>{content}</span>
43 <RadixTooltip.Arrow className="fill-gray-700" />
44 </motion.div>
45 </RadixTooltip.Content>
46 </RadixTooltip.Portal>
47 </RadixTooltip.Root>
48 </RadixTooltip.Provider>
49 );
50};
51
52export default memo(Tooltip);