CSS ツールチップ吹き出しアニメーション9選一行でコピペOK

Q: Reactでは何を使ってツールチップを表示しますか？

zipのreact/フォルダの各コンポーネントは、div要素かspan要素にこれまでと同じクラス名を付けているだけで、表示のタイミングとイージングはCSSのanimationと@keyframesが担います。07だけはonFocusとonBlurのイベントを受け取り、フォーカス中かどうかに応じて表示用のクラス名を付け外しします。

2026-09-09 · Godrich · 9種 · 8分で読める

フィードバック SCSS CSSのみホバーフォーム

css ツールチップ吹き出しは、ボタンやアイコンにカーソルを合わせると短い説明が浮かび上がる小さな部品です。今回は9種類を選び、位置合わせの基本からCSS Anchor PositioningやPopover APIといった新しい仕組みまで実装しました。

01 tooltip-bubble-top-basic

02 tooltip-bubble-fade-scale-pop

03 tooltip-bubble-anchor-flip

04 tooltip-bubble-rich-card-preview

05 tooltip-bubble-arrow-tail

06 tooltip-bubble-delay-show

07 tooltip-bubble-keyboard-focus-show

08 tooltip-bubble-kakao-style-bubble

09 tooltip-bubble-info-pulse-dot

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01 基本上部表示
02 フェード+拡大ポップ
03 スペースがなければ自動反転
04 カード型プレビューツールチップ
05 矢印の尻尾
06 遅延表示
07 キーボードフォーカスで表示
08 チャットアプリ風吹き出し
09 ヘルプパルスドット

掲載順は css 吹き出しデザインの華やかさではなく、位置を決める仕組みの難しさに沿っています。まずbottom:100%とtransformで固定表示する基本形から始め(01)、拡大しながら現れるポップな動きを重ね(02)、CSS Anchor Positioningで画面端でも自動的に向きを変える仕組みを試し(03)、Popover APIで最前面レイヤーに載せるカード型へ進みます(04)。続けて矢印付き・遅延表示・キーボード操作対応という実務で効くディテールを積み上げ(05〜07)、最後にチャットアプリ風の吹き出しと、注意を引くパルスドットという実際の場面への転用を並べました(08〜09)。クリックへの応答をもっと広く集めたものはマイクロインタラクション CSS 9選にあり、ポインターの位置そのものを効果にする向きは「カーソルエフェクト css」9選です。

01基本上部表示

どう動くか

対象の上に吹き出しがひとつ現れて短い説明を出し、マウスが離れると消えます。今回はさらに、現れる瞬間にスケールが1.12まで弾んでから、矢印側の辺を軸に2.6度→-1.5度→0.6度で収まる減衰回転が一度だけ重なります。

どこで使うか

ボタン横のヘルプアイコンや、表ヘッダーの略語説明によく使われます。

<main class="stage">
  <div class="tip-wrap">
    <button class="info-btn" type="button" aria-describedby="tip01">ヘルプ</button>
    <span class="tooltip is-demo" role="tooltip" id="tip01">会員限定機能です</span>
  </div>
</main>

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

$duration: $dur-loop;                             // 숨김→표시→숨김 한 주기
$easing: $ease-out;                                // 나타날 땐 빠르게, 사라질 땐 부드럽게
$color: $subject-blue;                             // 트리거 버튼 색

@include stage($stage-ink);

.tip-wrap {
  position: relative;                              // 툴팁 위치의 기준
}

.info-btn {
  border: 0;
  border-radius: $r-pill;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #fff;
  background: $color;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);                        // 버튼 바로 위, 8px 간격
  left: 50%;
  transform-origin: bottom center; // 규칙8: 화살표(버튼 쪽 아래변) 축 — 흔들림의 회전 중심
  transform: translate(-50%, 4px);
  opacity: 0;
  background: $subject-cream;
  color: $stage-ink;
  padding: 8px 14px;
  border-radius: $r-control;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

// 데모: 호버 없이 혼자 표시→숨김을 반복한다
.tooltip.is-demo {
  animation: tip-loop $duration $easing infinite;
}

// 등장 스프링 한 겹 — 스케일은 .85 에서 1.12 로 목표를 지나쳤다가 감쇠 반동(.95 → 1.03)으로 멎고,
// 회전은 화살표 축(아래변 중심)을 중심으로 2.6° → -1.5° → .6° 로 감쇠하며 흔들린다
@keyframes tip-loop {
  0%       { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: translate(-50%, 0) scale(1.12) rotate(2.6deg); }
  22%      { opacity: 1; transform: translate(-50%, 0) scale(.95) rotate(-1.5deg); }
  30%      { opacity: 1; transform: translate(-50%, 0) scale(1.03) rotate(.6deg); }
  36%, 55% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo { animation: none; opacity: 1; transform: translate(-50%, 0) scale(1); }
}

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

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

.tip-wrap {
  position: relative;
}

.info-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #fff;
  background: #2f6df6;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, 4px);
  opacity: 0;
  background: #fff7e6;
  color: #17141a;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

.tooltip.is-demo {
  animation: tip-loop 2s ease-out infinite;
}

@keyframes tip-loop {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.12) rotate(2.6deg);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.95) rotate(-1.5deg);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.03) rotate(0.6deg);
  }
  36%, 55% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

import { useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./TopTooltip.module.scss";

export type TopTooltipProps = {
  /** 버튼 글자 */
  label: ReactNode;
  /** 툴팁 글자 */
  text: string;
  /** 나타나고 사라지는 시간 (기본 200ms) */
  duration?: number;
  /** CSS easing */
  easing?: string;
  /** 버튼 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function TopTooltip({
  label,
  text,
  duration = 200,
  easing = "ease-out",
  color = "#2f6df6",
}: TopTooltipProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <span className={styles.wrap} style={vars}>
      <button
        type="button"
        className={styles.btn}
        aria-describedby="top-tooltip"
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        {label}
      </button>
      <span id="top-tooltip" role="tooltip" className={styles.tooltip} data-open={open}>
        {text}
      </span>
    </span>
  );
}

新しいタブで開く

01 · 基本上部表示 — 計測累積面積 4.959% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

상단 8px 간격opacity + translate 4px200ms

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  opacity: 0;
  background: $subject-cream;
  color: $stage-ink;
  padding: 8px 14px;
  border-radius: $r-control;
  white-space: nowrap;
  pointer-events: none;
}

.tooltip.is-demo {
  animation: tip-loop $duration $easing infinite;
}

02フェード+拡大ポップ

どう動くか

ツールチップが少し縮んだ状態から弾むように拡大して現れます。今回はスケールが1.14まで行き過ぎてから、上辺を軸に-2.4度→1.4度→-0.5度で収まる減衰回転が一度だけ加わりました。

どこで使うか

強調したい新機能の案内や、ツールバーアイコンの説明に向いています。

<main class="stage">
  <div class="tip-wrap">
    <button class="info-btn" type="button" aria-describedby="tip02">新着</button>
    <span class="tooltip is-demo" role="tooltip" id="tip02">新しく追加された機能です</span>
  </div>
</main>

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

$duration: $dur-loop;                              // 숨김→표시→숨김 한 주기
$easing: $ease-pop;                                // 끝에서 살짝 튀는 팝 이징
$color: $subject-ink;                              // 트리거 버튼 색 (노란 무대라 먹색)

@include stage($stage-yellow);

.tip-wrap { position: relative; }

.info-btn {
  border: 0;
  border-radius: $r-control;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: $stage-yellow;
  background: $color;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: calc(100% + 10px);                          // 버튼 아래쪽에 표시
  left: 50%;
  transform-origin: top center; // 규칙8: 버튼 아래변에서 펼침
  transform: translateX(-50%) scale(.85);
  opacity: 0;
  background: $stage-ink;
  color: $stage-yellow;
  padding: 8px 16px;
  border-radius: $r-control;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

.tooltip.is-demo {
  animation: pop-loop $duration $easing infinite;
}

// 등장 스프링 한 겹 — 스케일은 .85 → 1.14 오버슛 뒤 감쇠 반동(.94 → 1.02)으로 멎고,
// 회전은 화살표 축(윗변 중심)을 중심으로 -2.4° → 1.4° → -.5° 로 감쇠하며 흔들린다
@keyframes pop-loop {
  0%       { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: translateX(-50%) scale(1.14) rotate(-2.4deg); }
  22%      { opacity: 1; transform: translateX(-50%) scale(.94) rotate(1.4deg); }
  30%      { opacity: 1; transform: translateX(-50%) scale(1.02) rotate(-.5deg); }
  36%, 55% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo { 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: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.tip-wrap {
  position: relative;
}

.info-btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #ffd23f;
  background: #17141a;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) scale(0.85);
  opacity: 0;
  background: #17141a;
  color: #ffd23f;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

.tooltip.is-demo {
  animation: pop-loop 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}

@keyframes pop-loop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.14) rotate(-2.4deg);
  }
  22% {
    opacity: 1;
    transform: translateX(-50%) scale(0.94) rotate(1.4deg);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) scale(1.02) rotate(-0.5deg);
  }
  36%, 55% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}

import { useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./PopTooltip.module.scss";

export type PopTooltipProps = {
  label: ReactNode;
  text: string;
  /** 팝 애니메이션 시간 (기본 220ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function PopTooltip({
  label,
  text,
  duration = 220,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#17141a",
}: PopTooltipProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <span className={styles.wrap} style={vars}>
      <button
        type="button"
        className={styles.btn}
        aria-describedby="pop-tooltip"
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        {label}
      </button>
      <span id="pop-tooltip" role="tooltip" className={styles.tooltip} data-open={open}>
        {text}
      </span>
    </span>
  );
}

新しいタブで開く

02 · フェード+拡大ポップ — 計測累積面積 5.799% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scale(.9)→1cubic-bezier 팝180ms

.tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) scale(.85);
  opacity: 0;
}

.tooltip.is-demo {
  animation: pop-loop $duration $easing infinite;
}

@keyframes pop-loop {
  0%, 100% { opacity: 0; transform: translateX(-50%) scale(.85); }
  25%, 55% { opacity: 1; transform: translateX(-50%) scale(1); }
  80%      { opacity: 0; transform: translateX(-50%) scale(.85); }
}

03スペースがなければ自動反転

css ツールチップ表示位置をブラウザに任せる

anchor-nameとposition-anchorで位置を固定しておくと、画面端に近づいたときブラウザが自動で反対側に反転させます。画面下部の固定バー付近のボタンや、幅の狭いサイドバー内のアイコンに向いています。フォールバックとアンカー配置の両方に、スケール1.1まで行き過ぎてから2.2度→-1.3度→0.5度で収まる同じ減衰回転を重ねました。

どこで使うか

caniuseのCSS anchor positioning対応表（2026-09-09確認）によると、Chrome・Edgeは125以降で使え、仕様の完全対応は151以降、Safariは27で完全対応、Firefoxは147以降が部分対応です。

<main class="stage">
  <button class="trigger" type="button" aria-describedby="tip03">メニュー</button>
  <span class="tooltip is-demo" role="tooltip" id="tip03">最近の項目を5件まで保存します</span>
</main>

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

$duration: $dur-loop;                              // 숨김→표시→숨김 한 주기
$easing: $ease-out;
$color: $subject-cream;                            // 트리거 버튼 색 (주황 무대라 크림)

@include stage($stage-orange);
.stage { position: relative; }                     // 트리거·툴팁의 절대 위치 기준

// 트리거를 무대 위쪽에 둔다 — 기본 위치(위)에 자리가 없어야 뒤집힌다
.trigger {
  anchor-name: --tip03;                            // 앵커 이름 등록. 지원: Chrome 125+
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: $r-control;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: $subject-orange-deep;               // AA: 크림 면 위 주황 글자 5.04:1
  background: $color;
  cursor: pointer;
}

.tooltip {
  position: absolute;                               // 폴백: 앵커 없이도 버튼 아래에 뜬다
  top: calc(22px + 100% + 10px);
  left: 50%;
  transform-origin: top center; // 규칙8: 버튼 쪽 윗변 축 — 흔들림의 회전 중심
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  background: $stage-ink;
  color: $subject-cream;
  padding: 8px 14px;
  border-radius: $r-control;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

// 앵커 위치 지정 지원 브라우저: 버튼을 기준으로 아래에 붙이되, 위에 자리가 없으면 자동으로 아래로 뒤집는다
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning
@supports (position-anchor: --tip03) {
  .tooltip {
    position: fixed;
    position-anchor: --tip03;
    top: auto;
    inset: unset;
    position-area: top;                             // 기본은 버튼 위
    position-try-fallbacks: flip-block;              // 위에 자리가 없으면 아래로 뒤집힘
    margin-block: 10px;
    transform: translateY(0);
  }
  .tooltip.is-demo { animation-name: tip-loop-anchor; }
}

.tooltip.is-demo {
  animation: tip-loop $duration $easing infinite;
}

// 등장 스프링 한 겹(폴백 축) — 스케일 .85 → 1.1 오버슛 → 감쇠 반동, 회전은 윗변 축으로 2.2° → -1.3° → .5° 감쇠
@keyframes tip-loop {
  0%       { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1) rotate(2.2deg); }
  22%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(.95) rotate(-1.3deg); }
  30%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02) rotate(.5deg); }
  36%, 55% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.85) rotate(0deg); }
}

// 등장 스프링 한 겹(앵커 축) — 같은 오버슛·감쇠를 앵커 배치 버튼에도 그대로
@keyframes tip-loop-anchor {
  0%       { opacity: 0; transform: scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: scale(1.1) rotate(2.2deg); }
  22%      { opacity: 1; transform: scale(.95) rotate(-1.3deg); }
  30%      { opacity: 1; transform: scale(1.02) rotate(.5deg); }
  36%, 55% { opacity: 1; transform: scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: scale(.85) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo { animation: none; opacity: 1; transform: 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: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.trigger {
  anchor-name: --tip03;
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #c93000;
  background: #fff7e6;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: calc(22px + 100% + 10px);
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  background: #17141a;
  color: #fff7e6;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

@supports (position-anchor: --tip03) {
  .tooltip {
    position: fixed;
    position-anchor: --tip03;
    top: auto;
    inset: unset;
    position-area: top;
    position-try-fallbacks: flip-block;
    margin-block: 10px;
    transform: translateY(0);
  }
  .tooltip.is-demo {
    animation-name: tip-loop-anchor;
  }
}
.tooltip.is-demo {
  animation: tip-loop 2s ease-out infinite;
}

@keyframes tip-loop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.1) rotate(2.2deg);
  }
  22% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.95) rotate(-1.3deg);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.02) rotate(0.5deg);
  }
  36%, 55% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scale(0.85) rotate(0deg);
  }
}
@keyframes tip-loop-anchor {
  0% {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: scale(1.1) rotate(2.2deg);
  }
  22% {
    opacity: 1;
    transform: scale(0.95) rotate(-1.3deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.02) rotate(0.5deg);
  }
  36%, 55% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo {
    animation: none;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

import { useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./AnchorFlipTooltip.module.scss";

export type AnchorFlipTooltipProps = {
  label: ReactNode;
  text: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

// anchor-name/position-anchor 는 Chrome 125+ 에서만 동작한다. 미지원 브라우저는
// .module.scss 의 기본 position:absolute 규칙이 버튼 아래에 그대로 띄운다.
export default function AnchorFlipTooltip({
  label,
  text,
  duration = 200,
  easing = "ease-out",
  color = "#fff7e6",
}: AnchorFlipTooltipProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <span className={styles.wrap} style={vars}>
      <button
        type="button"
        className={styles.trigger}
        aria-describedby="anchor-tooltip"
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        {label}
      </button>
      <span id="anchor-tooltip" role="tooltip" className={styles.tooltip} data-open={open}>
        {text}
      </span>
    </span>
  );
}

新しいタブで開く

03 · スペースがなければ自動反転 — 計測累積面積 6.054% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

anchor-nameposition-try-fallbacks자동 뒤집힘

.trigger {
  anchor-name: --tip03;           // 位置の基準として登録する名前
  position: absolute;
}

// 対応状況は本文のcaniuseリンクを参照
@supports (position-anchor: --tip03) {
  .tooltip {
    position: fixed;
    position-anchor: --tip03;
    position-area: top;
    position-try-fallbacks: flip-block;   // 上に余白がなければ下へ反転
    margin-block: 10px;
  }
}

04カード型プレビューツールチップ

どう動くか

Popover APIでツールチップを最前面レイヤーに表示し、画像と説明つきのカード型プレビューを見せます。商品一覧のホバープレビューや、プロフィール名の上に出す要約カードに向いています。現れる瞬間もスケール1.08まで行き過ぎてから、上辺を軸に1.8度→-1度→0.4度で収まる減衰回転が重なります。

どこで使うか

MDNのPopover API対応表によると、Chrome 114以降・Safari 17以降・Firefox 125以降で動作し、対応前のブラウザではpopover属性が無視されてカードは通常のposition:absoluteのまま表示されます。

<main class="stage">
  <div class="wrap">
    <a class="trigger" href="#" aria-describedby="card04">商品を見る</a>
    <div class="card" id="card04" popover="manual" role="tooltip">
      <div class="card__thumb" aria-hidden="true"></div>
      <p class="card__title">ワイヤレスイヤホン</p>
      <p class="card__desc">ノイズキャンセリング・30時間再生</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>
  );
}

新しいタブで開く

04 · カード型プレビューツールチップ — 計測累積面積 23.918% · 動いたフレーム 13/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

popover=manualtop layer280px 카드

.card {
  position: absolute;             // 未対応ブラウザ向けのフォールバック位置
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

// popover="manual" で最前面レイヤーへ上がると、トリガーとの相対位置が失われる。
// 舞台の高さを基準にした固定値へ座標を組み直す
.card:popover-open {
  position: fixed;
  top: 150px;
  left: 50%;
}

05矢印の尻尾

css 吹き出し三角の作り方

吹き出しの下に小さな三角の尻尾がつき、どの要素を指しているかが分かります。登場スプリングもこの尻尾の軸を中心に、スケール1.12まで行き過ぎてから2.6度→-1.5度→0.6度で収まる減衰回転が加わります。

どこで使うか

フォーム入力欄の横の案内や、チャートのデータポイント説明に使います。

<main class="stage">
  <div class="tip-wrap">
    <span class="field-icon" aria-describedby="tip05">?</span>
    <span class="tooltip is-demo" role="tooltip" id="tip05">8文字以上入力してください</span>
  </div>
</main>

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

$duration: $dur-loop;                              // 숨김→표시→숨김 한 주기
$easing: $ease-out;
$color: $subject-cream;                            // 아이콘·말풍선 색

@include stage($stage-ink);

.tip-wrap { position: relative; }

.field-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: $color;
  color: $stage-ink;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 14px);                       // 화살표 8px + 여유 6px
  left: 50%;
  transform-origin: bottom center; // 규칙8: 화살표(아래변 중심) 축 — 흔들림의 회전 중심
  transform: translate(-50%, 4px);
  opacity: 0;
  background: $color;
  color: $stage-ink;
  padding: 8px 14px;
  border-radius: $r-control;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;

  &::after {                                        // 꼬리: clip-path 로 삼각형만 남긴다
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    background: $color;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
}

.tooltip.is-demo {
  animation: tip-loop $duration $easing infinite;
}

// 등장 스프링 한 겹 — 스케일 .85 → 1.12 오버슛 → 감쇠 반동, 회전은 화살표 축으로 2.6° → -1.5° → .6° 감쇠
@keyframes tip-loop {
  0%       { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: translate(-50%, 0) scale(1.12) rotate(2.6deg); }
  22%      { opacity: 1; transform: translate(-50%, 0) scale(.95) rotate(-1.5deg); }
  30%      { opacity: 1; transform: translate(-50%, 0) scale(1.03) rotate(.6deg); }
  36%, 55% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo { animation: none; opacity: 1; transform: translate(-50%, 0) 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: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.tip-wrap {
  position: relative;
}

.field-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff7e6;
  color: #17141a;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, 4px);
  opacity: 0;
  background: #fff7e6;
  color: #17141a;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: #fff7e6;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.tooltip.is-demo {
  animation: tip-loop 2s ease-out infinite;
}

@keyframes tip-loop {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.12) rotate(2.6deg);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.95) rotate(-1.5deg);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.03) rotate(0.6deg);
  }
  36%, 55% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
}

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ArrowTooltip.module.scss";

export type ArrowTooltipProps = {
  text: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ArrowTooltip({
  text,
  duration = 200,
  easing = "ease-out",
  color = "#fff7e6",
}: ArrowTooltipProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <span className={styles.wrap} style={vars}>
      <span
        className={styles.icon}
        tabIndex={0}
        aria-describedby="arrow-tooltip"
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        ?
      </span>
      <span id="arrow-tooltip" role="tooltip" className={styles.tooltip} data-open={open}>
        {text}
      </span>
    </span>
  );
}

新しいタブで開く

05 · 矢印の尻尾 — 計測累積面積 4.799% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

clip-path 삼각형4px 간격opacity

.tooltip {
  position: absolute;
  bottom: calc(100% + 14px);

  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    background: $color;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
}

06遅延表示

どう動くか

マウスを乗せてもすぐには出ず、少し留まったときだけ現れるため、通り過ぎただけでは表示されません。実際に現れる瞬間はスケール1.12まで行き過ぎてから、下辺を軸に2.4度→-1.4度→0.5度で収まる減衰回転が重なります。

どこで使うか

アイコンが密集したツールバーや、リストの各行にあるアイコンに向いています。

<main class="stage">
  <div class="tip-wrap">
    <button class="save-btn" type="button" aria-describedby="tip06">保存</button>
    <span class="tooltip is-demo" role="tooltip" id="tip06">変更内容は自動的に保存されます</span>
  </div>
</main>

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

$duration: $dur-loop;                              // 숨김→표시→숨김 한 주기 (지연 포함)
$easing: $ease-out;
$color: $subject-ink;                              // 버튼 색 (노란 무대라 먹색)

@include stage($stage-yellow);

.tip-wrap { position: relative; }

.save-btn {
  border: 0;
  border-radius: $r-control;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: $stage-yellow;
  background: $color;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center; // 규칙8: 버튼 쪽 아래변 축 — 흔들림의 회전 중심
  transform: translateX(-50%) scale(.85);
  opacity: 0;
  background: $stage-ink;
  color: $stage-yellow;
  padding: 8px 14px;
  border-radius: $r-control;
  font-size: clamp(12px, 3.4vw, 14px);
  max-width: clamp(140px, 42vw, 220px);
  white-space: nowrap;                              // 한글은 글자마다 줄바꿈 후보라, 없으면 세로로 한 글자씩 쪼개진다
  text-align: center;
  pointer-events: none;
}

// 마우스를 올려도 곧바로 뜨지 않는다 — 25%(≈500ms) 까지 숨겨 두고, 뜬 뒤엔 길게 유지한다
// 지연 뒤 등장에 스프링 한 겹 — 스케일 .85 → 1.12 오버슛 → 감쇠 반동, 회전은 아래변 축으로 2.4° → -1.4° → .5° 감쇠
@keyframes delay-loop {
  0%, 20%  { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
  28%      { opacity: 1; transform: translateX(-50%) scale(1.12) rotate(2.4deg); }
  37%      { opacity: 1; transform: translateX(-50%) scale(.95) rotate(-1.4deg); }
  45%      { opacity: 1; transform: translateX(-50%) scale(1.02) rotate(.5deg); }
  51%, 80% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
  100%     { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
}

.tooltip.is-demo {
  animation: delay-loop $duration $easing infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo { 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: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.tip-wrap {
  position: relative;
}

.save-btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #ffd23f;
  background: #17141a;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(0.85);
  opacity: 0;
  background: #17141a;
  color: #ffd23f;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  max-width: clamp(140px, 42vw, 220px);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

@keyframes delay-loop {
  0%, 20% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
  28% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12) rotate(2.4deg);
  }
  37% {
    opacity: 1;
    transform: translateX(-50%) scale(0.95) rotate(-1.4deg);
  }
  45% {
    opacity: 1;
    transform: translateX(-50%) scale(1.02) rotate(0.5deg);
  }
  51%, 80% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
}
.tooltip.is-demo {
  animation: delay-loop 2s ease-out infinite;
}

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

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

export type DelayTooltipProps = {
  label: ReactNode;
  text: string;
  /** 호버 후 뜨기까지 기다리는 시간 (기본 400ms) */
  delay?: number;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function DelayTooltip({
  label,
  text,
  delay = 400,
  duration = 160,
  easing = "ease-out",
  color = "#17141a",
}: DelayTooltipProps) {
  const [open, setOpen] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  const start = () => {
    timer.current = setTimeout(() => setOpen(true), delay);
  };
  const cancel = () => {
    if (timer.current) clearTimeout(timer.current);
    setOpen(false);
  };

  return (
    <span className={styles.wrap} style={vars}>
      <button
        type="button"
        className={styles.btn}
        aria-describedby="delay-tooltip"
        onMouseEnter={start}
        onMouseLeave={cancel}
        onFocus={start}
        onBlur={cancel}
      >
        {label}
      </button>
      <span id="delay-tooltip" role="tooltip" className={styles.tooltip} data-open={open}>
        {text}
      </span>
    </span>
  );
}

新しいタブで開く

06 · 遅延表示 — 計測累積面積 6.83% · 動いたフレーム 13/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@keyframes delay-loop짧은 등장긴 유지

.tooltip {
  max-width: clamp(140px, 42vw, 220px);
  white-space: nowrap;           // 折り返しを止めて一行に収める
  text-align: center;
}

.tooltip.is-demo {
  animation: delay-loop $duration $easing infinite;
}

@keyframes delay-loop {
  0%, 20%  { opacity: 0; }
  40%, 80% { opacity: 1; }
  100%     { opacity: 0; }
}

07キーボードフォーカスで表示

どう動くか

マウスホバーだけでなくTabキーでフォーカスを移しても同じツールチップが出ます。キーボードのみで操作するユーザー向けのフォームラベル説明や、アクセシブルなアイコンボタンに向いています。どちらのきっかけでも、現れる瞬間はスケール1.12まで行き過ぎてから2.6度→-1.5度→0.6度で収まる減衰回転が一度だけ重なります。

どこで使うか

aria-describedby属性でツールチップのIDを紐づけているため、スクリーンリーダーにも同じ説明が読み上げられます。

<main class="stage">
  <div class="tip-wrap">
    <button class="gear-btn" type="button" aria-describedby="tip07">設定</button>
    <span class="tooltip is-demo" role="tooltip" id="tip07">Tabキーで移動しても表示されます</span>
  </div>
</main>

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

$duration: $dur-loop;                              // 숨김→표시→숨김 한 주기
$easing: $ease-out;
$color: $subject-cream;                            // 버튼·툴팁 색 (주황 무대라 크림)

@include stage($stage-orange);

.tip-wrap { position: relative; }

.gear-btn {
  border: 2px solid $color;
  border-radius: $r-control;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: $subject-ink;                             // AA: 주황 무대 위 글자 5.50:1 (테두리는 크림 유지)
  background: transparent;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center; // 규칙8: 버튼 쪽 아래변 축 — 흔들림의 회전 중심
  transform: translateX(-50%) scale(.85);
  opacity: 0;
  background: $color;
  color: $stage-orange;
  padding: 8px 14px;
  border-radius: $r-control;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

// 실사용: 마우스 호버뿐 아니라 :focus-visible 에도 같은 규칙이 붙는다 (버튼을 Tab 으로 옮겨도 뜬다)
.gear-btn:hover + .tooltip,
.gear-btn:focus-visible + .tooltip {
  opacity: 1;
}

// 데모: 실제 포커스 없이 혼자 표시→숨김을 반복한다
// 등장에 스프링 한 겹 — 스케일 .85 → 1.12 오버슛 → 감쇠 반동, 회전은 아래변 축으로 2.6° → -1.5° → .6° 감쇠
.tooltip.is-demo {
  animation: tip-loop $duration $easing infinite;
}

@keyframes tip-loop {
  0%       { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: translateX(-50%) scale(1.12) rotate(2.6deg); }
  22%      { opacity: 1; transform: translateX(-50%) scale(.95) rotate(-1.5deg); }
  30%      { opacity: 1; transform: translateX(-50%) scale(1.03) rotate(.6deg); }
  36%, 55% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: translateX(-50%) scale(.85) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo { 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: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.tip-wrap {
  position: relative;
}

.gear-btn {
  border: 2px solid #fff7e6;
  border-radius: 12px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  color: #17141a;
  background: transparent;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(0.85);
  opacity: 0;
  background: #fff7e6;
  color: #ff4d1f;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  white-space: nowrap;
  pointer-events: none;
}

.gear-btn:hover + .tooltip,
.gear-btn:focus-visible + .tooltip {
  opacity: 1;
}

.tooltip.is-demo {
  animation: tip-loop 2s ease-out infinite;
}

@keyframes tip-loop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12) rotate(2.6deg);
  }
  22% {
    opacity: 1;
    transform: translateX(-50%) scale(0.95) rotate(-1.5deg);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) scale(1.03) rotate(0.6deg);
  }
  36%, 55% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.85) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}

import type { CSSProperties, ReactNode } from "react";
import styles from "./FocusTooltip.module.scss";

export type FocusTooltipProps = {
  label: ReactNode;
  text: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

// :hover 와 :focus-visible 을 CSS 에서 같이 걸어 뒀다 — Tab 으로 옮겨도 마우스 호버와 같은 툴팁이 뜬다.
export default function FocusTooltip({
  label,
  text,
  duration = 200,
  easing = "ease-out",
  color = "#fff7e6",
}: FocusTooltipProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <span className={styles.wrap} style={vars}>
      <button type="button" className={styles.btn} aria-describedby="focus-tooltip">
        {label}
      </button>
      <span id="focus-tooltip" role="tooltip" className={styles.tooltip}>
        {text}
      </span>
    </span>
  );
}

新しいタブで開く

07 · キーボードフォーカスで表示 — 計測累積面積 5.953% · 動いたフレーム 14/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

:focus-visible:hover 동시 대응aria-describedby

// マウスホバーだけでなく :focus-visible にも同じ規則をつける
// (ボタンをTabで移動しても表示される)
.gear-btn:hover + .tooltip,
.gear-btn:focus-visible + .tooltip {
  opacity: 1;
}

.tooltip.is-demo {
  animation: tip-loop $duration $easing infinite;
}

@keyframes tip-loop {
  0%, 100% { opacity: 0; }
  20%, 55% { opacity: 1; }
  80%      { opacity: 0; }
}

08チャットアプリ風吹き出し

どう動くか

チャットアプリのように丸い吹き出しに尻尾がつき、話しかけているような印象になります。スケール1.14まで行き過ぎてから、尻尾側の角を軸に3度→-1.7度→0.7度で収まる減衰回転が加わりました。

どこで使うか

チャットボットの最初の挨拶吹き出しや、オンボーディングガイドの説明に使います。

<main class="stage">
  <div class="chat-wrap">
    <div class="avatar" aria-hidden="true">AI</div>
    <p class="bubble is-demo" role="status">こんにちは、ご用件は何ですか?</p>
  </div>
</main>

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

$duration: $dur-loop;                              // 숨김→표시→숨김 한 주기
$easing: $ease-pop;                                // 등장 바운스
$color: $subject-blue;                             // 말풍선 색

@include stage($stage-paper);

.chat-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: $stage-ink;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  flex: none;
}

.bubble {
  position: relative;
  margin: 0;
  max-width: clamp(160px, 46vw, 240px);
  background: $color;
  color: #fff;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;               // 왼쪽 아래만 각져 꼬리처럼 보인다
  font-size: clamp(12px, 3.4vw, 14px);
  opacity: 0;
  transform-origin: bottom left; // 규칙8: 꼬리 bottom left 고정 팝
  transform: scale(.85);

  &::after {                                        // 말풍선 꼬리
    content: "";
    position: absolute;
    left: -6px;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: $color;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
}

.bubble.is-demo {
  animation: bubble-loop $duration $easing infinite;
}

// 등장 스프링 한 겹 — 스케일 .85 → 1.14 오버슛 → 감쇠 반동(.93 → 1.02), 회전은 꼬리 축(bottom left)으로 3° → -1.7° → .7° 감쇠
@keyframes bubble-loop {
  0%       { opacity: 0; transform: scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: scale(1.14) rotate(3deg); }
  22%      { opacity: 1; transform: scale(.93) rotate(-1.7deg); }
  30%      { opacity: 1; transform: scale(1.02) rotate(.7deg); }
  36%, 55% { opacity: 1; transform: scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: scale(.85) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bubble.is-demo { animation: none; opacity: 1; transform: 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);
}

.chat-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #17141a;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  flex: none;
}

.bubble {
  position: relative;
  margin: 0;
  max-width: clamp(160px, 46vw, 240px);
  background: #2f6df6;
  color: #fff;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;
  font-size: clamp(12px, 3.4vw, 14px);
  opacity: 0;
  transform-origin: bottom left;
  transform: scale(0.85);
}
.bubble::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: #2f6df6;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.bubble.is-demo {
  animation: bubble-loop 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}

@keyframes bubble-loop {
  0% {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: scale(1.14) rotate(3deg);
  }
  22% {
    opacity: 1;
    transform: scale(0.93) rotate(-1.7deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.02) rotate(0.7deg);
  }
  36%, 55% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.is-demo {
    animation: none;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

import { useEffect, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ChatBubble.module.scss";

export type ChatBubbleProps = {
  avatar: string;
  text: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ChatBubble({
  avatar,
  text,
  duration = 260,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#2f6df6",
}: ChatBubbleProps) {
  const [shown, setShown] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  // 마운트되면 한 번 등장한다 — 채팅창에 메시지가 도착하는 흐름
  useEffect(() => {
    const t = setTimeout(() => setShown(true), 60);
    return () => clearTimeout(t);
  }, []);

  return (
    <span className={styles.wrap} style={vars}>
      <span className={styles.avatar} aria-hidden="true">{avatar}</span>
      <p className={styles.bubble} data-open={shown}>{text}</p>
    </span>
  );
}

新しいタブで開く

08 · チャットアプリ風吹き出し — 計測累積面積 9.751% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

border-radius 18px꼬리 pseudo등장 바운스

.bubble {
  position: relative;
  border-radius: 18px 18px 18px 4px;   // 左下だけ角ばって尻尾に見える
  transform-origin: bottom left;
  transform: scale(.85);

  &::after {
    content: "";
    position: absolute;
    left: -6px;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: $color;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
}

09ヘルプパルスドット

どう動くか

小さな点がゆっくりパルスして、確認しておきたい情報があることを知らせます。吹き出し本体が現れる瞬間もスケール1.12まで行き過ぎてから、下辺を軸に2.6度→-1.5度→0.6度で収まる減衰回転が重なります。

どこで使うか

新機能バッジや、設定画面のヘルプアイコンに使います。

<main class="stage">
  <div class="tip-wrap">
    <span class="badge" aria-describedby="tip09">新機能<i class="dot" aria-hidden="true"></i></span>
    <span class="tooltip is-demo" role="tooltip" id="tip09">精算履歴をダウンロードできます</span>
  </div>
</main>

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

$duration: $dur-loop;                              // 점 펄스·툴팁 공통 주기
$easing: $ease-out;
$color: $subject-blue;                             // 점 색

@include stage($stage-ink);

.tip-wrap { position: relative; display: inline-block; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: $r-pill;
  background: $subject-cream;
  color: $stage-ink;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
}

.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: $color;

  &::before {                                       // 은은하게 커졌다 작아지는 펄스 링
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: $color;
    opacity: .5;
    animation: pulse-ring $duration $easing infinite;
  }
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center; // 규칙8: 버튼 쪽 아래변 축 — 흔들림의 회전 중심
  transform: translate(-50%, 4px);
  opacity: 0;
  background: $subject-cream;
  color: $stage-ink;
  padding: 8px 14px;
  border-radius: $r-control;
  font-size: clamp(12px, 3.4vw, 14px);
  max-width: clamp(150px, 44vw, 220px);
  white-space: nowrap;                              // 한글은 글자마다 줄바꿈 후보라, 없으면 세로로 한 글자씩 쪼개진다
  pointer-events: none;
}

.tooltip.is-demo {
  animation: tip-loop $duration $easing infinite;
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(.6); opacity: .5; }
  50%      { transform: scale(1.6); opacity: 0; }
}

// 툴팁 등장에 스프링 한 겹 — 스케일 .85 → 1.12 오버슛 → 감쇠 반동, 회전은 아래변 축으로 2.6° → -1.5° → .6° 감쇠
@keyframes tip-loop {
  0%       { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
  12%      { opacity: 1; transform: translate(-50%, 0) scale(1.12) rotate(2.6deg); }
  22%      { opacity: 1; transform: translate(-50%, 0) scale(.95) rotate(-1.5deg); }
  30%      { opacity: 1; transform: translate(-50%, 0) scale(1.03) rotate(.6deg); }
  36%, 55% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
  80%      { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
  100%     { opacity: 0; transform: translate(-50%, 4px) scale(.85) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dot::before { animation: none; opacity: .3; }
  .tooltip.is-demo { animation: none; opacity: 1; transform: translate(-50%, 0) 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: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.tip-wrap {
  position: relative;
  display: inline-block;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff7e6;
  color: #17141a;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
}

.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f6df6;
}
.dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: #2f6df6;
  opacity: 0.5;
  animation: pulse-ring 2s ease-out infinite;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, 4px);
  opacity: 0;
  background: #fff7e6;
  color: #17141a;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: clamp(12px, 3.4vw, 14px);
  max-width: clamp(150px, 44vw, 220px);
  white-space: nowrap;
  pointer-events: none;
}

.tooltip.is-demo {
  animation: tip-loop 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes tip-loop {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.12) rotate(2.6deg);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.95) rotate(-1.5deg);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.03) rotate(0.6deg);
  }
  36%, 55% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.85) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot::before {
    animation: none;
    opacity: 0.3;
  }
  .tooltip.is-demo {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
}

import { useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./PulseDotTooltip.module.scss";

export type PulseDotTooltipProps = {
  label: ReactNode;
  text: string;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function PulseDotTooltip({
  label,
  text,
  duration = 200,
  easing = "ease-out",
  color = "#2f6df6",
}: PulseDotTooltipProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <span className={styles.wrap} style={vars}>
      <span
        className={styles.badge}
        tabIndex={0}
        aria-describedby="pulse-tooltip"
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
      >
        {label}
        <i className={styles.dot} aria-hidden="true" />
      </span>
      <span id="pulse-tooltip" role="tooltip" className={styles.tooltip} data-open={open}>
        {text}
      </span>
    </span>
  );
}

新しいタブで開く

09 · ヘルプパルスドット — 計測累積面積 7.869% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@keyframes pulse-ring2초 주기opacity 감쇠

.dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: $color;
  opacity: .5;
  animation: pulse-ring $duration $easing infinite;
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(.6); opacity: .5; }
  50%      { transform: scale(1.6); opacity: 0; }
}

どこで崩れるか — 落とし穴

9つとも表示と非表示の切り替えをopacityとtransformだけで作っていて、displayの付け替えは使っていません。

最前面レイヤーで座標が変わる

1つ目の落とし穴は04のPopover APIを組んだときに実際に踏んだもので、トリガーからの相対位置のまま top: calc(100% + 12px) を残していると、カードが最前面レイヤーに上がった瞬間にコンテイニングブロックがボタンからビューポートへ変わり、カードがビューポートの100%+12px下、つまり舞台の外へ押し出されて見えなくなりました。position: fixedに切り替え、舞台の高さを基準にした固定値（top: 150px）で座標を組み直したことで直りました。

日本語の折り返し

2つ目は06と09の吹き出し内の文字を組んだときのことです。max-widthだけ指定してwhite-space: nowrapを外して試すと、日本語は単語の間に区切りのスペースがないため、幅が足りない箇所ならどこでも折り返し候補になり、文字が縦に一文字ずつ積み重なって表示されました。修正済みの9ファイルを開くには uauwf4hn という文字列が必要です。下のカードからzipをダウンロードしてください。

対応していないブラウザでは

3つ目は03のスペースがなければ自動反転を試したときのことです。position-try-fallbacksは@supports (position-anchor: --tip03)の中でしか効かせていないため、対応前のブラウザではposition: absoluteのフォールバックがそのまま使われ、画面端に近づいても向きは反転せず下固定のままでした。吹き出しの背後に広がる背景自体を主張させたい場合は、メッシュグラデーションの上にグレインを残すLPキットの色の層がこの枠の後ろを埋めます。

アクセシビリティ

動きを減らす設定では

9つとも prefers-reduced-motion: reduce で表示アニメーションが止まりますが、要素そのものは消えません。01・02・05・06・07のツールチップと08の吹き出しはopacity: 1のまま静止して読める状態で残り、03の反転版もtransformを外して透明度だけで見える状態を保ちます。

止まり方の違い

04のカードはscale(1)の等倍で止まり、09のパルスリングだけopacity: .3の弱い輪として静止し、拡大縮小も止まります。

@media (prefers-reduced-motion: reduce) {
  .tooltip.is-demo, .card, .bubble.is-demo,
  .dot::before { animation: none !important; }
  .tooltip.is-demo, .bubble.is-demo { opacity: 1; transform: none; }
}

このほかのCSSアニメーションはこちらのカテゴリー一覧に、このサイトの成り立ちは紹介ページにまとめています。

FAQ

css ツールチップ最前面に出すにはPopover APIが必要ですか？

ツールチップはaria-describedby属性で対象の要素と紐づけられた補足説明で、01〜03・05〜09のように多くはposition: absoluteで通常のレイヤーに配置されます。04で使ったPopover APIはpopover属性を持つ要素をブラウザの最前面レイヤーへ引き上げる仕組みで、他の要素の重なり順やoverflow: hiddenの影響を受けずに表示できる点が異なります。

9つを同じページに複数置いても動きは干渉しませんか？

干渉しません。それぞれのアニメーションは自分自身のクラス名にしか結び付いていないため、01のツールチップと09のパルスドットを隣に並べても、片方のanimationがもう片方の要素に影響することはありません。position-anchorやpopoverを使う03・04も、名前と属性がそれぞれの要素に紐づいているので同時設置に問題はありません。なお、08のチャット風吹き出しを会話が続く形へ育てたい場合は、チャット吹き出し css アニメーション9選がその先を担います。

Reactでは何を使ってツールチップを表示しますか？

zipのreact/フォルダの各コンポーネントは、div要素かspan要素にこれまでと同じクラス名を付けているだけで、表示のタイミングとイージングはCSSのanimationと@keyframesが担います。07だけはonFocusとonBlurのイベントを受け取り、フォーカス中かどうかに応じて表示用のクラス名を付け外しします。

CSS ツールチップ 吹き出しアニメーション9選 一行でコピペOK

01基本上部表示

どう動くか

どこで使うか

02フェード+拡大ポップ

どう動くか

どこで使うか

03スペースがなければ自動反転

css ツールチップ 表示位置をブラウザに任せる

どこで使うか

04カード型プレビューツールチップ

どう動くか

どこで使うか

05矢印の尻尾

css 吹き出し 三角の作り方

どこで使うか

06遅延表示

どう動くか

どこで使うか

07キーボードフォーカスで表示

どう動くか

どこで使うか

08チャットアプリ風吹き出し

どう動くか

どこで使うか

09ヘルプパルスドット

どう動くか

どこで使うか

どこで崩れるか — 落とし穴

最前面レイヤーで座標が変わる

日本語の折り返し

対応していないブラウザでは

アクセシビリティ

動きを減らす設定では

止まり方の違い

FAQ

css ツールチップ 最前面に出すにはPopover APIが必要ですか？

9つを同じページに複数置いても動きは干渉しませんか？

Reactでは何を使ってツールチップを表示しますか？

こんな記事もどうぞ

CSS ツールチップ吹き出しアニメーション9選一行でコピペOK

css ツールチップ表示位置をブラウザに任せる

css 吹き出し三角の作り方

css ツールチップ最前面に出すにはPopover APIが必要ですか？