Tooltip() — react Function Reference

Architecture documentation for the Tooltip() function in Tooltip.js from the react codebase.

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ Tooltip() — react Function Reference

Dependency Diagram

graph TD
  18091250_4636_e404_3b72_076fbd80ff67["Tooltip()"]
  67a53ff5_5364_e0e2_039c_5bb44dfc1bd6["Tooltip.js"]
  18091250_4636_e404_3b72_076fbd80ff67 -->|defined in| 67a53ff5_5364_e0e2_039c_5bb44dfc1bd6
  e1a80482_d7ac_0192_bf17_6fcfe8a2bed9["getMousePosition()"]
  18091250_4636_e404_3b72_076fbd80ff67 -->|calls| e1a80482_d7ac_0192_bf17_6fcfe8a2bed9
  a1aa812e_1a36_270b_ab79_707647b861d1["getTooltipPosition()"]
  18091250_4636_e404_3b72_076fbd80ff67 -->|calls| a1aa812e_1a36_270b_ab79_707647b861d1
  style 18091250_4636_e404_3b72_076fbd80ff67 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js lines 11–54

export default function Tooltip({
  children,
  className,
  label,
  style,
}: any): React.Node {
  const containerRef = useRef(null);
  const tooltipRef = useRef(null);

  // update the position of the tooltip based on current mouse position
  const updateTooltipPosition = (event: SyntheticMouseEvent) => {
    const element = tooltipRef.current;
    if (element != null) {
      // first find the mouse position
      const mousePosition = getMousePosition(containerRef.current, event);
      // use the mouse position to find the position of tooltip
      const {left, top} = getTooltipPosition(element, mousePosition);
      // update tooltip position
      element.style.left = left;
      element.style.top = top;
    }
  };

  const onMouseMove = (event: SyntheticMouseEvent) => {
    updateTooltipPosition(event);
  };

  const tooltipClassName = label === null ? styles.hidden : '';

  return (
    <div
      className={styles.Container}
      onMouseMove={onMouseMove}
      ref={containerRef}>
      <div
        className={`${styles.Tooltip} ${tooltipClassName} ${className || ''}`}
        ref={tooltipRef}
        style={style}>
        {label}
      </div>
      {children}
    </div>
  );
}