Reactで、ツールチップを画面の端からはみ出さずに出す方法

.naive-wrap { position: relative; }
.tooltip.naive { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }

top-left  上に表示 左上(-84,-40) 右下(156,11) はみ出し:左に84px、上に40px
top-right 上に表示 左上(234,-40) 右下(474,11) はみ出し:右に84px、上に40px ページの横幅:474px
left      上に表示 左上(-84,208) 右下(156,259) はみ出し:左に84px
center    上に表示 左上(75,208) 右下(315,259) はみ出し:なし
right     上に表示 左上(234,208) 右下(474,259) はみ出し:右に84px ページの横幅:474px
in-card   上に表示 左上(-36,389) 右下(204,440) はみ出し:左に37px

import { useLayoutEffect, useState, type RefObject } from 'react';

export type TooltipPosition = {
  top: number;
  left: number;
  arrowLeft: number;
  side: 'top' | 'bottom';
};

const GAP = 8; // ボタンとツールチップのすき間
const MARGIN = 8; // 画面の端から空ける幅
const ARROW_INSET = 12; // 矢印をツールチップの角に寄せすぎない

// anchorRef の要素の上（入らなければ下）に、画面からはみ出さない位置を計算する
export function useTooltipPosition(
  anchorRef: RefObject<HTMLElement | null>,
  tipRef: RefObject<HTMLElement | null>,
) {
  const [pos, setPos] = useState<TooltipPosition | null>(null);

  useLayoutEffect(() => {
    function update() {
      const anchor = anchorRef.current?.getBoundingClientRect();
      const tip = tipRef.current?.getBoundingClientRect();
      if (!anchor || !tip) return;
      // スクロールバーを除いた、見えている範囲の幅と高さ
      const vw = document.documentElement.clientWidth;
      const vh = document.documentElement.clientHeight;

      // 上に入らず、下のほうが広く空いていれば、下に出す
      const fitsTop = anchor.top - GAP - tip.height >= MARGIN;
      const side = fitsTop || anchor.top >= vh - anchor.bottom ? 'top' : 'bottom';
      const top = side === 'top' ? anchor.top - GAP - tip.height : anchor.bottom + GAP;

      // ボタンの真ん中に合わせてから、左右の端に収まるようにずらす
      const center = anchor.left + anchor.width / 2;
      const left = Math.min(Math.max(center - tip.width / 2, MARGIN), vw - tip.width - MARGIN);

      // 矢印は、ずらした分だけ逆に動かして、ボタンの真ん中を指す
      const arrowLeft = Math.min(Math.max(center - left, ARROW_INSET), tip.width - ARROW_INSET);

      setPos({ top, left, arrowLeft, side });
    }

    update();
    // capture: true にすると、ページの中のスクロールする箱のスクロールも受け取れる
    window.addEventListener('scroll', update, true);
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('scroll', update, true);
      window.removeEventListener('resize', update);
    };
  }, [anchorRef, tipRef]);

  return pos;
}

import { useId, useRef, useState, type ReactNode, type RefObject } from 'react';
import { createPortal } from 'react-dom';
import { useTooltipPosition } from './useTooltipPosition';

// ボタンにポインターを乗せるか、フォーカスしたあいだだけ、ツールチップを出す
export function Tooltip({ content, children }: { content: ReactNode; children: ReactNode }) {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef<HTMLButtonElement>(null);
  const id = useId();

  return (
    <>
      <button
        ref={anchorRef}
        aria-describedby={open ? id : undefined}
        onPointerEnter={() => setOpen(true)}
        onPointerLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        {children}
      </button>
      {open && createPortal(<Bubble id={id} anchorRef={anchorRef}>{content}</Bubble>, document.body)}
    </>
  );
}

function Bubble({ id, anchorRef, children }: {
  id: string;
  anchorRef: RefObject<HTMLElement | null>;
  children: ReactNode;
}) {
  const tipRef = useRef<HTMLDivElement>(null);
  const pos = useTooltipPosition(anchorRef, tipRef);

  return (
    <div
      ref={tipRef}
      id={id}
      role="tooltip"
      className="tooltip"
      data-side={pos?.side}
      // 位置が決まるまでは、見えないまま左上に置いて大きさを測る
      style={pos ? { top: pos.top, left: pos.left } : { top: 0, left: 0, visibility: 'hidden' }}
    >
      {children}
      <span className="arrow" style={{ left: pos?.arrowLeft }} />
    </div>
  );
}

.tooltip {
  position: fixed; z-index: 10; box-sizing: border-box;
  width: max-content; max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px; border-radius: 6px; background: #1f2a30; color: #fff; font-size: 13px;
}
.tooltip .arrow { position: absolute; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.tooltip[data-side^="top"] .arrow { bottom: -5px; }
.tooltip[data-side^="bottom"] .arrow { top: -5px; }

top-left  下に表示 左上(8,57) 右下(248,108) はみ出し:なし 矢印とボタンの中心の差:0px
top-right 下に表示 左上(142,57) 右下(382,108) はみ出し:なし 矢印とボタンの中心の差:0px
left      上に表示 左上(8,201) 右下(248,252) はみ出し:なし 矢印とボタンの中心の差:0px
center    上に表示 左上(75,201) 右下(315,252) はみ出し:なし 矢印とボタンの中心の差:0px
right     上に表示 左上(142,201) 右下(382,252) はみ出し:なし 矢印とボタンの中心の差:0px
in-card   上に表示 左上(8,382) 右下(248,433) はみ出し:なし 矢印とボタンの中心の差:0px

ページを 400px スクロール: ボタン top=300 → ツールチップは上（すき間 8px、left=8, right=248, 画面の幅 390）
ページを 600px スクロール: ボタン top=100 → ツールチップは上（すき間 8px、left=8, right=248, 画面の幅 390）
ページを 680px スクロール: ボタン top=20 → ツールチップは下（すき間 8px、left=8, right=248, 画面の幅 390）

箱の中のボタンにフォーカス: ボタン top=261 → ツールチップは上（すき間 8px、left=8, right=248, 画面の幅 390）
箱を 50px スクロール: ボタン top=211 → ツールチップは上（すき間 8px、left=8, right=248, 画面の幅 390）

箱を 50px スクロール: ボタン top=211 → ツールチップは重なる（すき間 NaNpx、left=8, right=248, 画面の幅 390）

幅 390: ボタン top=260 → ツールチップは上（すき間 8px、left=142, right=382, 画面の幅 390）
幅 320 に変えたあと: ボタン top=260 → ツールチップは上（すき間 8px、left=72, right=312, 画面の幅 320）

import { useId, useRef, useState, type ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { useFloating, autoUpdate, offset, flip, shift, arrow } from '@floating-ui/react-dom';

// Floating UI で位置を決める版
export function FloatingTooltip({ content, children }: { content: ReactNode; children: ReactNode }) {
  const [open, setOpen] = useState(false);
  const arrowRef = useRef<HTMLSpanElement>(null);
  const id = useId();
  const { refs, floatingStyles, placement, middlewareData } = useFloating({
    strategy: 'fixed',
    placement: 'top',
    middleware: [
      offset(8),
      flip({ padding: 8 }),
      shift({ padding: 8 }),
      arrow({ element: arrowRef, padding: 8 }),
    ],
    whileElementsMounted: autoUpdate,
  });

  return (
    <>
      <button
        ref={refs.setReference}
        aria-describedby={open ? id : undefined}
        onPointerEnter={() => setOpen(true)}
        onPointerLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        {children}
      </button>
      {open && createPortal(
        <div ref={refs.setFloating} id={id} role="tooltip" className="tooltip floating" data-side={placement} style={floatingStyles}>
          {content}
          <span ref={arrowRef} className="arrow" style={{ left: middlewareData.arrow?.x }} />
        </div>,
        document.body,
      )}
    </>
  );
}

import { useId, useState, type ReactNode } from 'react';

// CSS のアンカー位置指定で置く版（React は開け閉めだけ）
export function CssAnchorTooltip({ content, children }: { content: ReactNode; children: ReactNode }) {
  const [open, setOpen] = useState(false);
  const id = useId();
  // useId の値には CSS の名前に使えない文字が入りうるので、英数字だけにする
  const anchorName = `--tip-${id.replace(/[^a-zA-Z0-9]/g, '')}`;

  return (
    <>
      <button
        style={{ anchorName }}
        aria-describedby={open ? id : undefined}
        onPointerEnter={() => setOpen(true)}
        onPointerLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        {children}
      </button>
      {open && (
        <div id={id} role="tooltip" className="tooltip css-anchor" style={{ positionAnchor: anchorName }}>
          {content}
        </div>
      )}
    </>
  );
}

.tooltip.css-anchor {
  position-area: top; margin: 8px;
  position-try-fallbacks: flip-block;
}

top-left  下に表示 左上(8,57) 右下(248,108) はみ出し:なし
right     上に表示 左上(142,201) 右下(382,252) はみ出し:なし
in-card   上に表示 左上(8,382) 右下(248,433) はみ出し:なし