1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118x
 
118x
118x
 
118x
 
 
 
 
 
 
 
 
 
 
 
 
 
118x
 
118x
 
 
 
118x
 
 
118x
118x
 
118x
 
118x
110x
 
 
 
 
 
 
 
 
 
 
 
14x
 
14x
234x
 
234x
 
 
 
234x
 
 
 
 
 
118x
 
 
 
14x
 
118x
 
118x
118x
 
 
118x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
 
 
 
116x
116x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
14x
 
221x
 
import * as React from 'react';
import {
    useFloating,
    autoUpdate,
    offset,
    flip,
    shift,
    useHover,
    useFocus,
    useDismiss,
    useRole,
    useInteractions,
    useMergeRefs,
    FloatingPortal,
} from '@floating-ui/react';
import styles from './tooltip.module.css';
import type { Placement } from '@floating-ui/react';
 
interface TooltipOptions {
    initialOpen?: boolean;
    placement?: Placement;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
}
 
export function useTooltip({
    initialOpen = false,
    placement = 'top',
    open: controlledOpen,
    onOpenChange: setControlledOpen,
}: TooltipOptions = {}) {
    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
 
    const open = controlledOpen ?? uncontrolledOpen;
    const setOpen = setControlledOpen ?? setUncontrolledOpen;
 
    const data = useFloating({
        placement,
        open,
        onOpenChange: setOpen,
        whileElementsMounted: autoUpdate,
        middleware: [
            offset(5),
            flip({
                fallbackAxisSideDirection: 'start',
            }),
            shift({ padding: 5 }),
        ],
    });
 
    const context = data.context;
 
    const hover = useHover(context, {
        move: false,
        enabled: controlledOpen === null,
    });
    const focus = useFocus(context, {
        enabled: controlledOpen === null,
    });
    const dismiss = useDismiss(context);
    const role = useRole(context, { role: 'tooltip' });
 
    const interactions = useInteractions([hover, focus, dismiss, role]);
 
    return React.useMemo(
        () => ({
            open,
            setOpen,
            ...interactions,
            ...data,
        }),
        [open, setOpen, interactions, data]
    );
}
 
type ContextType = ReturnType<typeof useTooltip> | null;
 
const TooltipContext = React.createContext<ContextType>(null);
 
export const useTooltipContext = () => {
    const context = React.useContext(TooltipContext);
 
    Iif (context === null) {
        throw new Error('Tooltip components must be wrapped in <Tooltip />');
    }
 
    return context;
};
 
function Tooltip({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {
    // This can accept any props as options, e.g. `placement`,
    // or other positioning options.
    const tooltip = useTooltip(options);
    return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}
 
const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>(
    function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
        const context = useTooltipContext();
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const childrenRef = (children as any)?.ref;
        const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
        // `asChild` allows the user to pass any element as the anchor
        Iif (asChild && React.isValidElement(children)) {
            return React.cloneElement(
                children,
                context.getReferenceProps({
                    ref,
                    ...props,
                    ...(children.props || {}),
                    'data-state': context.open ? 'open' : 'closed',
                } as React.HTMLProps<Element>)
            );
        }
 
        return (
            <span
                ref={ref}
                // The user can style the trigger based on the state
                data-state={context.open ? 'open' : 'closed'}
                {...context.getReferenceProps(props)}
            >
                {children}
            </span>
        );
    }
);
 
const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(function TooltipContent(
    props,
    propRef
) {
    const context = useTooltipContext();
    const ref = useMergeRefs([context.refs.setFloating, propRef]);
 
    return (
        <FloatingPortal>
            {context.open && (
                <div
                    className={styles.tooltip}
                    ref={ref}
                    style={{
                        position: context.strategy,
                        top: context.y ?? 0,
                        left: context.x ?? 0,
                        visibility: context.x === null ? 'hidden' : 'visible',
                        ...props.style,
                    }}
                    {...context.getFloatingProps(props)}
                />
            )}
        </FloatingPortal>
    );
});
 
Tooltip.Trigger = TooltipTrigger;
Tooltip.Content = TooltipContent;
 
export default Tooltip;