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
162
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128x
 
128x
128x
 
128x
 
 
 
 
 
 
 
 
 
 
 
 
 
128x
 
128x
 
 
 
 
128x
 
 
128x
128x
 
128x
 
128x
119x
 
 
 
 
 
 
 
 
 
 
 
14x
 
14x
249x
 
249x
 
 
 
249x
 
 
 
 
 
128x
 
 
 
14x
 
128x
 
128x
128x
 
 
128x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
 
 
 
121x
121x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
14x
 
230x
 
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;
}
 
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,
        // == null: uncontrolled usage passes undefined, and strict === null kept these disabled
        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);
 
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;