useSmartTooltip.js — react Source File

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {useLayoutEffect, useRef} from 'react';

const TOOLTIP_OFFSET_BOTTOM = 10;
const TOOLTIP_OFFSET_TOP = 5;

export default function useSmartTooltip({
  canvasRef,
  mouseX,
  mouseY,
}: {
  canvasRef: {current: HTMLCanvasElement | null},
  mouseX: number,
  mouseY: number,
}): {current: HTMLElement | null} {
  const ref = useRef<HTMLElement | null>(null);

  // HACK: Browser extension reports window.innerHeight of 0,
  // so we fallback to using the tooltip target element.
  let height = window.innerHeight;
  let width = window.innerWidth;
  const target = canvasRef.current;
  if (target !== null) {
    const rect = target.getBoundingClientRect();
    height = rect.top + rect.height;
    width = rect.left + rect.width;
  }

  useLayoutEffect(() => {
    const element = ref.current;
    if (element !== null) {
      // Let's check the vertical position.
      if (mouseY + TOOLTIP_OFFSET_BOTTOM + element.offsetHeight >= height) {
        // The tooltip doesn't fit below the mouse cursor (which is our
        // default strategy). Therefore we try to position it either above the
        // mouse cursor or finally aligned with the window's top edge.
        if (mouseY - TOOLTIP_OFFSET_TOP - element.offsetHeight > 0) {
          // We position the tooltip above the mouse cursor if it fits there.
          element.style.top = `${
            mouseY - element.offsetHeight - TOOLTIP_OFFSET_TOP
          }px`;
        } else {
          // Otherwise we align the tooltip with the window's top edge.
          element.style.top = '0px';
        }
      } else {
        element.style.top = `${mouseY + TOOLTIP_OFFSET_BOTTOM}px`;
      }

      // Now let's check the horizontal position.
      if (mouseX + TOOLTIP_OFFSET_BOTTOM + element.offsetWidth >= width) {
        // The tooltip doesn't fit at the right of the mouse cursor (which is
        // our default strategy). Therefore we try to position it either at the
        // left of the mouse cursor or finally aligned with the window's left
        // edge.
        if (mouseX - TOOLTIP_OFFSET_TOP - element.offsetWidth > 0) {
          // We position the tooltip at the left of the mouse cursor if it fits
          // there.
          element.style.left = `${
            mouseX - element.offsetWidth - TOOLTIP_OFFSET_TOP
          }px`;
        } else {
          // Otherwise, align the tooltip with the window's left edge.
          element.style.left = '0px';
        }
      } else {
        element.style.left = `${mouseX + TOOLTIP_OFFSET_BOTTOM}px`;
      }
    }
  });

  return ref;
}