Function createTooltip

src/components/createTooltip.ts:19–201

(container: HTMLElement)

};

export function createTooltip(container: HTMLElement): Tooltip {
  const computedPosition = getComputedStyle(container).position;
  const didSetRelative = computedPosition === 'static';
  const previousInlinePosition = didSetRelative ? container.style.position : null;

  if (didSetRelative) {
    container.style.position = 'relative';
  }

  const root = document.createElement('div');
  root.style.position = 'absolute';
  root.style.left = '0';
  root.style.top = '0';
  root.style.pointerEvents = 'none';
  root.style.userSelect = 'none';
  root.style.boxSizing = 'border-box';

  // Theme-friendly default visuals with CSS variable override points.
  root.style.zIndex = 'var(--chartgpu-tooltip-z, 10)';
  root.style.padding = 'var(--chartgpu-tooltip-padding, 6px 8px)';
  root.style.borderRadius = 'var(--chartgpu-tooltip-radius, 8px)';
  root.style.borderStyle = 'solid';
  root.style.borderWidth = 'var(--chartgpu-tooltip-border-width, 1px)';
  root.style.borderColor =
    'var(--chartgpu-tooltip-border, rgba(224,224,224,0.35))';
  root.style.boxShadow =
    'var(--chartgpu-tooltip-shadow, 0 6px 18px rgba(0,0,0,0.35))';
  root.style.maxWidth = 'var(--chartgpu-tooltip-max-width, min(320px, 100%))';
  root.style.overflow = 'hidden';
  root.style.fontFamily =
    'var(--chartgpu-tooltip-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji")';
  root.style.fontSize = 'var(--chartgpu-tooltip-font-size, 12px)';
  root.style.lineHeight = 'var(--chartgpu-tooltip-line-height, 1.2)';
  root.style.color = 'var(--chartgpu-tooltip-color, #e0e0e0)';
  root.style.background = 'var(--chartgpu-tooltip-bg, rgba(26,26,46,0.95))';
  root.style.whiteSpace = 'normal';

  // Transition-ready baseline; keep fade-out visible until completion.
  root.style.opacity = '0';
  root.style.transitionProperty = 'opacity';
  const fadeMs = 140;
  root.style.transitionDuration = `${fadeMs}ms`;
  root.style.transitionTimingFunction = 'ease';
  root.style.willChange = 'opacity';

  // Keep it out of layout/paint when hidden.
  root.style.display = 'none';
  root.style.visibility = 'hidden';

  root.setAttribute('role', 'tooltip');
  container.appendChild(root);

  let disposed = false;
  let transitionToken = 0;
  let hideTimeoutId: number | null = null;
  let rafId: number | null = null;

  const clearPendingTransitions = (): void => {