Как позиционировать x-координату под курсором мыши в react-tooltip?

Вопрос или проблема

function App() {
  const arr = Array.from({ length: 10 }, (_, i) => i);
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });

  const handleMouseEnter = (event) => {
    const { pageX, pageY } = event;
    setTooltipPosition({ x: pageX, y: pageY });
  };

  return (
    <>
      <Tooltip
        id='tooltip'
        positionStrategy='fixed'
        position={tooltipPosition}
        clickable
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {arr.map((item) => (
          <div
            data-tooltip-id='tooltip'
            data-tooltip-content="Hello world!"
            data-tooltip-place="bottom-start"
            onMouseEnter={handleMouseEnter}
            style={{ width: '100vw', height: '100px', backgroundColor: 'gray' }}
          />
        ))}
      </div>
    </>
  );
}

function App() {
  const arr = Array.from({ length: 10 }, (_, i) => i);
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove(e) {
     const { screenX, screenY } = event;
     setTooltipPosition({ x: screenX, y: screenY });
  }

  return (
    <>
      <Tooltip
        id='tooltip'
        positionStrategy='fixed'
        position={tooltipPosition}
        clickable
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {arr.map((item) => (
          <div
            data-tooltip-id='tooltip'
            data-tooltip-content="Hello world!"
            data-tooltip-place="bottom-start"
            onMouseMove={handleMouseMove}
            style={{ width: '100vw', height: '100px', backgroundColor: 'gray' }}
          />
        ))}
      </div>
    </>
  );
}

Ответ или решение

Как расположить тултип под курсором мыши в react-tooltip

Иногда в процессе разработки приложений на React с использованием библиотеки react-tooltip возникает задача установить положение тултипа непосредственно под курсором мыши, а не у границы элемента. В этой статье мы обсудим, как достичь этого и корректно настроить позиционирование тултипа с учетом только оси X.

Исходная проблема

При реализации тултипов, как в вашем коде, вы используете событие onMouseEnter для установки положения тултипа, что приводит к тому, что тултип появляется в заданной позиции на момент наведения курсора. Однако, эта позиция не обновляется, когда курсор мыши перемещается по элементу, что отрицательно сказывается на UX.

Шаги для решения проблемы

Для того чтобы тултип следовал за курсором мыши и располагался под ним, нужно будет изменить обработчик событий на onMouseMove. Это обеспечит обновление позиции тултипа в реальном времени. Также, чтобы тултип находился оставаясь у курсора, нужно корректировать значение по оси Y в соответствии с высотой тултипа.

Вот обновленный код, который решает эту задачу:

import React, { useState } from 'react';
import Tooltip from 'react-tooltip';

function App() {
  const arr = Array.from({ length: 10 }, (_, i) => i);
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    const { pageX, pageY } = event;
    // Определяем позицию Y так, чтобы тултип находился под курсором
    setTooltipPosition({ x: pageX, y: pageY + 10 }); // 10 - пробел между курсором и тултипом
  };

  return (
    <>
      <Tooltip
        id='tooltip'
        positionStrategy='fixed'
        position={tooltipPosition}
        clickable
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {arr.map((item) => (
          <div
            data-tooltip-id='tooltip'
            data-tooltip-content="Hello world!"
            data-tooltip-place="bottom-start"
            onMouseMove={handleMouseMove}
            style={{ width: '100vw', height: '100px', backgroundColor: 'gray' }}
            key={item}
          />
        ))}
      </div>
    </>
  );
}

export default App;

Пояснение к коду

1. Обработчик onMouseMove: Этот обработчик отслеживает движение мыши и обновляет положение тултипа каждый раз, когда курсор перемещается над элементом. Мы используем параметры pageX и pageY, чтобы получить текущие координаты мыши.

2. Установка Y: Мы добавляем небольшое значение (например, 10 пикселей) к pageY, чтобы тултип располагался ниже курсора, что улучшает читабельность и восприятие информации.

3. Параметр positionStrategy: Убедитесь, что установленный параметр positionStrategy='fixed' позволяет тултипу оставаться в заданной позиции на экране, даже если происходит прокрутка.

4. Стиль тултипа: Вы можете настроить стили тултипа по своему усмотрению — например, переменить цвет фона или добавить тени, чтобы улучшить визуальное восприятие.

Дополнительные рекомендации

Для улучшения взаимодействия с пользователем стоит добавить логику скрытия тултипа, когда курсор покидает элемент, используя обработчик события onMouseLeave. Это сделает взаимодействие более предсказуемым и удобным.

const handleMouseLeave = () => {
    // Логика для скрытия тултипа
};

Заключение

Позиционирование тултипов в соответствии с курсором мыши в React позволяет значительно улучшить взаимодействие пользователя с интерфейсом. Библиотека react-tooltip с операциями, представленными выше, позволяет легко и эффективно выполнять данную задачу. Ваш интерфейс станет более отзывчивым и информационным, что непременно положительно скажется на общем впечатлении пользователя.