04Rich card preview tooltip

<main class="stage">
  <div class="wrap">
    <a class="trigger" href="#" aria-describedby="card04">View item</a>
    <div class="card" id="card04" popover="manual" role="tooltip">
      <div class="card__thumb" aria-hidden="true"></div>
      <p class="card__title">Wireless earbuds</p>
      <p class="card__desc">Noise cancelling · 30h battery</p>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 숨김→표시→숨김 한 주기
$easing: $ease-spring;
$color: $subject-blue;                             // 트리거 링크 색

@include stage($stage-paper);
.stage { position: relative; }

.wrap { position: relative; }

.trigger {
  display: inline-block;
  border-radius: $r-pill;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #fff;
  background: $color;
  text-decoration: none;
}

// popover 속성은 UA 가 기본 여백·테두리를 준다 — 전부 지우고 우리 위치로 다시 잡는다
.card {
  position: absolute;                               // 폴백: popover 미지원 브라우저도 이 위치에 보인다
  top: calc(100% + 12px);
  left: 50%;
  transform-origin: top center; // 규칙8: 트리거 쪽 윗변 축 — 흔들림의 회전 중심
  transform: translateX(-50%);
  margin: 0;
  border: 0;
  padding: 14px;
  width: min(220px, 68vw);
  background: $stage-paper;
  border-radius: $r-card;
  box-shadow: $shadow-raised;
  opacity: 0;
  animation: card-loop $duration $easing infinite;
}

// popover 지원 브라우저: 최상위 레이어로 올라가면서 컨테이닝 블록이 뷰포트로 바뀐다.
// top:100% 는 더 이상 트리거 기준이 아니게 되므로 무대 높이 기준 고정값으로 다시 잡는다
// (실측 2026-09-09: top:calc(100%+12px) 를 그대로 두니 트리거가 아니라 뷰포트 100%+12px 아래로
// 밀려나 무대 밖으로 나가면서 넘침·움직임 0 이 됐다).
.card:popover-open {
  position: fixed;
  top: 150px;
  left: 50%;
}

.card__thumb {
  height: 64px;
  border-radius: $r-control;
  background: linear-gradient(135deg, $subject-blue, $subject-cream);
  margin-bottom: 10px;
}

.card__title { margin: 0 0 4px; font-weight: 700; font-size: 14px; line-height: 1.3; font-family: inherit; color: $stage-ink; }
.card__desc  { margin: 0; font-size: clamp(11px, 3vw, 13px); color: $stage-ink; opacity: .7; }

// 등장 스프링 한 겹 — 스케일 .94 → 1.08 오버슛 뒤 감쇠 반동(.97 → 1.015), 회전은 윗변 축으로 1.8° → -1° → .4° 감쇠
@keyframes card-loop {
  0%       { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.94) rotate(0deg); }
  12%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08) rotate(1.8deg); }
  22%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(.97) rotate(-1deg); }
  30%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.015) rotate(.4deg); }
  36%, 55% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.94) rotate(0deg); }
  100%     { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.94) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.wrap {
  position: relative;
}

.trigger {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #fff;
  background: #2f6df6;
  text-decoration: none;
}

.card {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%);
  margin: 0;
  border: 0;
  padding: 14px;
  width: min(220px, 68vw);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  opacity: 0;
  animation: card-loop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.card:popover-open {
  position: fixed;
  top: 150px;
  left: 50%;
}

.card__thumb {
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6df6, #fff7e6);
  margin-bottom: 10px;
}

.card__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  font-family: inherit;
  color: #17141a;
}

.card__desc {
  margin: 0;
  font-size: clamp(11px, 3vw, 13px);
  color: #17141a;
  opacity: 0.7;
}

@keyframes card-loop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.94) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.08) rotate(1.8deg);
  }
  22% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.97) rotate(-1deg);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.015) rotate(0.4deg);
  }
  36%, 55% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.94) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.94) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}

// Popover API 로 카드를 최상위 레이어에 띄운다. 미지원 브라우저는 showPopover 가 없어 조용히 넘어간다
try { document.getElementById("card04").showPopover(); } catch (e) {}

import { useRef, useState } from "react";
import type { CSSProperties, MouseEvent } from "react";
import styles from "./CardPreviewTooltip.module.scss";

export type CardPreviewTooltipProps = {
  label: string;
  title: string;
  desc: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type PopoverEl = HTMLDivElement & { showPopover?: () => void; hidePopover?: () => void };

export default function CardPreviewTooltip({
  label,
  title,
  desc,
  duration = 220,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: CardPreviewTooltipProps) {
  const cardRef = useRef<PopoverEl | null>(null);
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  const show = () => {
    setOpen(true);
    cardRef.current?.showPopover?.();
  };
  const hide = () => {
    setOpen(false);
    cardRef.current?.hidePopover?.();
  };

  return (
    <span className={styles.wrap} style={vars}>
      <a
        className={styles.trigger}
        href="#"
        onMouseEnter={show}
        onMouseLeave={hide}
        onFocus={show}
        onBlur={hide}
        onClick={(e: MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
      >
        {label}
      </a>
      {/* @ts-ignore popover 는 React 타입 스텁에 없다 — 표준 HTML 속성 그대로 넘긴다 */}
      <div ref={cardRef} popover="manual" role="tooltip" className={styles.card} data-open={open}>
        <div className={styles.thumb} aria-hidden="true" />
        <p className={styles.title}>{title}</p>
        <p className={styles.desc}>{desc}</p>
      </div>
    </span>
  );
}