51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T3aa4,'use client'; import * as React from 'react'; import { motion, AnimatePresence, LayoutGroup, type Transition, type HTMLMotionProps, } from 'motion/react'; import { useFloating, autoUpdate, offset as floatingOffset, flip, shift, arrow as floatingArrow, FloatingPortal, FloatingArrow, type UseFloatingReturn, } from '@floating-ui/react'; import { getStrictContext } from '@/lib/get-strict-context'; import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot'; type Side = 'top' | 'bottom' | 'left' | 'right'; type Align = 'start' | 'center' | 'end'; type TooltipData = { contentProps: HTMLMotionProps<'div'>; contentAsChild: boolean; rect: DOMRect; side: Side; sideOffset: number; align: Align; alignOffset: number; id: string; }; type GlobalTooltipContextType = { showTooltip: (data: TooltipData) => void; hideTooltip: () => void; hideImmediate: () => void; currentTooltip: TooltipData | null; transition: Transition; globalId: string; setReferenceEl: (el: HTMLElement | null) => void; referenceElRef: React.RefObject; }; const [GlobalTooltipProvider, useGlobalTooltip] = getStrictContext('GlobalTooltipProvider'); type TooltipContextType = { props: HTMLMotionProps<'div'>; setProps: React.Dispatch>>; asChild: boolean; setAsChild: React.Dispatch>; side: Side; sideOffset: number; align: Align; alignOffset: number; id: string; }; const [LocalTooltipProvider, useTooltip] = getStrictContext( 'LocalTooltipProvider', ); type TooltipPosition = { x: number; y: number }; function getResolvedSide(placement: Side | `${Side}-${Align}`) { if (placement.includes('-')) { return placement.split('-')[0] as Side; } return placement as Side; } function initialFromSide(side: Side): Partial> { if (side === 'top') return { y: 15 }; if (side === 'bottom') return { y: -15 }; if (side === 'left') return { x: 15 }; return { x: -15 }; } type TooltipProviderProps = { children: React.ReactNode; id?: string; openDelay?: number; closeDelay?: number; transition?: Transition; }; function TooltipProvider({ children, id, openDelay = 700, closeDelay = 300, transition = { type: 'spring', stiffness: 300, damping: 35 }, }: TooltipProviderProps) { const globalId = React.useId(); const [currentTooltip, setCurrentTooltip] = React.useState(null); const timeoutRef = React.useRef(null); const lastCloseTimeRef = React.useRef(0); const referenceElRef = React.useRef(null); const showTooltip = React.useCallback( (data: TooltipData) => { if (timeoutRef.current) clearTimeout(timeoutRef.current); if (currentTooltip !== null) { setCurrentTooltip(data); return; } const now = Date.now(); const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay; timeoutRef.current = window.setTimeout( () => setCurrentTooltip(data), delay, ); }, [openDelay, closeDelay, currentTooltip], ); const hideTooltip = React.useCallback(() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); timeoutRef.current = window.setTimeout(() => { setCurrentTooltip(null); lastCloseTimeRef.current = Date.now(); }, closeDelay); }, [closeDelay]); const hideImmediate = React.useCallback(() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); setCurrentTooltip(null); lastCloseTimeRef.current = Date.now(); }, []); const setReferenceEl = React.useCallback((el: HTMLElement | null) => { referenceElRef.current = el; }, []); React.useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') hideImmediate(); }; window.addEventListener('keydown', onKeyDown, true); window.addEventListener('scroll', hideImmediate, true); window.addEventListener('resize', hideImmediate, true); return () => { window.removeEventListener('keydown', onKeyDown, true); window.removeEventListener('scroll', hideImmediate, true); window.removeEventListener('resize', hideImmediate, true); }; }, [hideImmediate]); return ( {children} ); } type RenderedTooltipContextType = { side: Side; align: Align; open: boolean; }; const [RenderedTooltipProvider, useRenderedTooltip] = getStrictContext('RenderedTooltipContext'); type FloatingContextType = { context: UseFloatingReturn['context']; arrowRef: React.RefObject; }; const [FloatingProvider, useFloatingContext] = getStrictContext('FloatingContext'); const MotionTooltipArrow = motion.create(FloatingArrow); type TooltipArrowProps = Omit< React.ComponentProps, 'context' > & { withTransition?: boolean; }; function TooltipArrow({ ref, withTransition = true, ...props }: TooltipArrowProps) { const { side, align, open } = useRenderedTooltip(); const { context, arrowRef } = useFloatingContext(); const { transition, globalId } = useGlobalTooltip(); React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement); const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side]; return ( ); } type TooltipPortalProps = React.ComponentProps; function TooltipPortal(props: TooltipPortalProps) { return ; } function TooltipOverlay() { const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip(); const [rendered, setRendered] = React.useState<{ data: TooltipData | null; open: boolean; }>({ data: null, open: false }); const arrowRef = React.useRef(null); const side = rendered.data?.side ?? 'top'; const align = rendered.data?.align ?? 'center'; const { refs, x, y, strategy, context, update } = useFloating({ placement: align === 'center' ? side : `${side}-${align}`, whileElementsMounted: autoUpdate, middleware: [ floatingOffset({ mainAxis: rendered.data?.sideOffset ?? 0, crossAxis: rendered.data?.alignOffset ?? 0, }), flip(), shift({ padding: 8 }), floatingArrow({ element: arrowRef }), ], }); React.useEffect(() => { if (currentTooltip) { setRendered({ data: currentTooltip, open: true }); } else { setRendered((p) => (p.data ? { ...p, open: false } : p)); } }, [currentTooltip]); React.useLayoutEffect(() => { if (referenceElRef.current) { refs.setReference(referenceElRef.current); update(); } }, [referenceElRef, refs, update, rendered.data]); const ready = x != null && y != null; const Component = rendered.data?.contentAsChild ? Slot : motion.div; const resolvedSide = getResolvedSide(context.placement); return ( {rendered.data && ready && (

{ if (!rendered.open) setRendered({ data: null, open: false }); }} transition={transition} {...rendered.data.contentProps} style={{ position: 'relative', ...(rendered.data.contentProps?.style || {}), }} />

)} ); } type TooltipProps = { children: React.ReactNode; side?: Side; sideOffset?: number; align?: Align; alignOffset?: number; }; function Tooltip({ children, side = 'top', sideOffset = 0, align = 'center', alignOffset = 0, }: TooltipProps) { const id = React.useId(); const [props, setProps] = React.useState>({}); const [asChild, setAsChild] = React.useState(false); return ( {children} ); } type TooltipContentProps = WithAsChild>; function shallowEqualWithoutChildren( a?: HTMLMotionProps<'div'>, b?: HTMLMotionProps<'div'>, ) { if (a === b) return true; if (!a || !b) return false; const keysA = Object.keys(a).filter((k) => k !== 'children'); const keysB = Object.keys(b).filter((k) => k !== 'children'); if (keysA.length !== keysB.length) return false; for (const k of keysA) { // @ts-expect-error index if (a[k] !== b[k]) return false; } return true; } function TooltipContent({ asChild = false, ...props }: TooltipContentProps) { const { setProps, setAsChild } = useTooltip(); const lastPropsRef = React.useRef | undefined>( undefined, ); React.useEffect(() => { if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) { lastPropsRef.current = props; setProps(props); } }, [props, setProps]); React.useEffect(() => { setAsChild(asChild); }, [asChild, setAsChild]); return null; } type TooltipTriggerProps = WithAsChild>; function TooltipTrigger({ ref, onMouseEnter, onMouseLeave, onFocus, onBlur, onPointerDown, asChild = false, ...props }: TooltipTriggerProps) { const { props: contentProps, asChild: contentAsChild, side, sideOffset, align, alignOffset, id, } = useTooltip(); const { showTooltip, hideTooltip, hideImmediate, currentTooltip, setReferenceEl, } = useGlobalTooltip(); const triggerRef = React.useRef(null); React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement); const suppressNextFocusRef = React.useRef(false); const handleOpen = React.useCallback(() => { if (!triggerRef.current) return; setReferenceEl(triggerRef.current); const rect = triggerRef.current.getBoundingClientRect(); showTooltip({ contentProps, contentAsChild, rect, side, sideOffset, align, alignOffset, id, }); }, [ showTooltip, setReferenceEl, contentProps, contentAsChild, side, sideOffset, align, alignOffset, id, ]); const handlePointerDown = React.useCallback( (e: React.PointerEvent) => { onPointerDown?.(e); if (currentTooltip?.id === id) { suppressNextFocusRef.current = true; hideImmediate(); Promise.resolve().then(() => { suppressNextFocusRef.current = false; }); } }, [onPointerDown, currentTooltip?.id, id, hideImmediate], ); const handleMouseEnter = React.useCallback( (e: React.MouseEvent) => { onMouseEnter?.(e); handleOpen(); }, [handleOpen, onMouseEnter], ); const handleMouseLeave = React.useCallback( (e: React.MouseEvent) => { onMouseLeave?.(e); hideTooltip(); }, [hideTooltip, onMouseLeave], ); const handleFocus = React.useCallback( (e: React.FocusEvent) => { onFocus?.(e); if (suppressNextFocusRef.current) return; handleOpen(); }, [handleOpen, onFocus], ); const handleBlur = React.useCallback( (e: React.FocusEvent) => { onBlur?.(e); hideTooltip(); }, [hideTooltip, onBlur], ); const Component = asChild ? Slot : motion.div; return ( ); } export { TooltipProvider, Tooltip, TooltipContent, TooltipTrigger, TooltipArrow, useGlobalTooltip, useTooltip, type TooltipProviderProps, type TooltipProps, type TooltipContentProps, type TooltipTriggerProps, type TooltipArrowProps, type TooltipPosition, type GlobalTooltipContextType, type TooltipContextType, }; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","@floating-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40floating-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@floating-ui/react"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["@animate-ui/primitives-animate-slot","@animate-ui/lib-get-strict-context"]}]]}],["$","$L52",null,{"sourceUrl":"https://animate-ui.com/r/primitives-animate-tooltip.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/primitives-animate-tooltip","itemId":"@animate-ui/primitives-animate-tooltip"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/primitives/animate/tooltip/index.tsx","content":"$54","type":"registry:ui","target":"components/animate-ui/primitives/animate/tooltip.tsx"}]}]]}],"$L55"]}]

Tooltip

Installation

Files

components

Styles