useMouseCoordinates()

Tooltip.js

const Tooltip = (props) => {
    const [x, y] = useMouseCoordinates();
  
    return (
        <p>Mouse is at x: {x}, y: {y}.</p>
    );
}

useMouseCoordinates.js

import { useState, useEffect } from 'react';

export const useMouseCoordinates = () => {
    const [x, setX] = useState(0);
    const [y, setY] = useState(0);

    const handleMouseMove = (e) => {
        setX(e.pageX);
        setY(e.pageY);
    };

    useEffect(() => {
        window.addEventListener('mousemove', handleMouseMove);

        return () => window.removeEventListener('mousemove', handleMouseMove);
    });

    return [x, y];
};