フォーカス時にツールチップを出す(案1)

inputFocusTooltip.tsx

import React, { useEffect, useRef, useState } from 'react';
import { useFloating } from '@floating-ui/react';

const TooltipInput = () => {
    const [isFocused, setIsFocused] = useState(false);
    const referenceElement = useRef(null);
    const popperElement = useRef(null);
    const { update } = useFloating();

    useEffect(() => {
        if (isFocused) {
            referenceElement.current && popperElement.current && update();
        }
    }, [isFocused, update]);

    return (
        <div>
            <input
                ref={referenceElement}
                onFocus={() => setIsFocused(true)}
                onBlur={() => setIsFocused(false)}
            />
            {isFocused && (
                <div ref={popperElement} style={{ position: 'absolute' }}>
                    ここに入力してください
                </div>
            )}
        </div>
    );
};

export default TooltipInput;