CSS 툴팁 말풍선 9종 — 한 줄 복붙으로
CSS 툴팁 말풍선은 버튼이나 아이콘에 커서를 올리거나 포커스를 두었을 때 짧은 설명을 그 옆에 띄우는 작은 말풍선으로, 이 글은 자바스크립트 없이 대부분 순수 CSS로 돌아가는 아홉 가지 방식을 모았습니다.
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
자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip
- 01 기본 상단 표시
- 02 페이드+확대 팝
- 03 공간 없으면 자동 뒤집힘
- 04 카드형 미리보기 툴팁
- 05 꼬리 화살표
- 06 지연 표시
- 07 키보드 포커스 시 표시
- 08 카톡 스타일 말풍선
- 09 도움말 펄스 점
아홉 개는 인기 순위가 아니라 툴팁이 화면에서 맞닥뜨리는 순서로 놓았습니다. 가장 단순한 등장 방식(01~02) 다음은 위치가 까다로워지는 경우(03~05), 그다음 나타나는 타이밍을 다르게 다루는 경우(06~07), 마지막은 툴팁이라는 틀을 살짝 벗어난 응용(08~09)입니다. 각 섹션에는 핵심 코드 조각만 남겼고, 파일 전체는 아래 zip 하나에 아홉 개 모두 들어 있습니다. 이보다 넓은 뜻의 클릭 응답을 모아 보면 바이브코딩 마이크로 인터랙션 9종이 있고, 포인터가 어디에 있는지 자체를 효과로 만드는 쪽은 CSS 마우스 커서 효과 9종입니다.
01기본 상단 표시
어떻게 움직이나
버튼 위 8px 지점에 말풍선을 두고 opacity와 위아래 이동만으로 나타나고 사라지게 하면 가장 기본적인 툴팁이 됩니다. 이번 개편에서는 뜨는 순간 스케일이 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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
상단 8px 간격opacity + translate 4px200ms
.tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translate(-50%, 4px);
opacity: 0;
}
.tooltip.is-demo {
animation: tip-loop $duration $easing infinite;
}
@keyframes tip-loop {
0%, 100% { opacity: 0; transform: translate(-50%, 4px); }
20%, 55% { opacity: 1; transform: translate(-50%, 0); }
80% { opacity: 0; transform: translate(-50%, 4px); }
}
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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
scale(.9)→1cubic-bezier 팝180ms
.tooltip {
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공간 없으면 자동 뒤집힘
어떻게 움직이나
트리거에 anchor-name을 붙이고 툴팁에 position-anchor와 position-try-fallbacks: flip-block을 걸어 두면, 화면 위쪽에 자리가 없을 때 브라우저가 좌표 계산 없이 알아서 아래로 뒤집습니다. 폴백 배치와 앵커 배치 두 축 모두에 스케일 1.1 오버슛과 2.2도→-1.3도→0.5도 감쇠 회전 흔들림을 같은 모양으로 얹었습니다.
어디에 쓰나
화면 하단 고정 바 근처 버튼이나 폭이 좁은 사이드바 안 아이콘처럼 위치가 매번 달라지는 자리에 씁니다.
<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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
anchor-nameposition-try-fallbacks자동 뒤집힘
.trigger { anchor-name: --tip03; }
@supports (position-anchor: --tip03) {
.tooltip {
position: fixed;
position-anchor: --tip03;
position-area: top;
position-try-fallbacks: flip-block;
}
}
04카드형 미리보기 툴팁
어떻게 움직이나
popover="manual" 속성을 준 카드를 스크립트 한 줄로 showPopover()를 호출해 두면, 부모 요소의 overflow나 z-index에 상관없이 항상 다른 내용 위에 그려집니다. 카드가 뜰 때도 스케일 1.08 오버슛과 윗변 축 기준 1.8도→-1도→0.4도 감쇠 회전 흔들림이 한 겹 더해집니다.
어디에 쓰나
상품 목록의 호버 미리보기나 프로필 이름 위에 뜨는 요약 카드처럼 이미지와 설명이 함께 필요한 자리에 씁니다.
<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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
popover=manualtop layer280px 카드
.card[popover] {
position: absolute;
top: calc(100% + 12px);
left: 50%;
}
.card:popover-open {
position: fixed;
top: 150px;
left: 50%;
}
05꼬리 화살표
어떻게 움직이나
말풍선 아래 clip-path로 자른 작은 삼각형 하나를 더하면 어떤 요소를 가리키는지 눈으로 바로 알 수 있습니다. 등장 스프링도 이 화살표 축을 회전 중심으로 삼아 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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
clip-path 삼각형4px 간격opacity
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 8px;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
06지연 표시
어떻게 움직이나
키프레임의 앞 20%를 그대로 투명하게 비워 두면 마우스가 스치듯 지나갈 때는 뜨지 않고, 잠깐 머문 경우에만 말풍선이 나타납니다. 지연 뒤 실제로 나타나는 순간에는 스케일 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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
@keyframes delay-loop짧은 등장긴 유지
@keyframes delay-loop {
0%, 20% { opacity: 0; }
40%, 80% { opacity: 1; }
100% { opacity: 0; }
}
.tooltip.is-demo {
animation: delay-loop $duration $easing infinite;
}
07키보드 포커스 시 표시
마우스 호버 효과만으로 충분한가
:hover와 :focus-visible을 같은 규칙에 나란히 걸어 두면 마우스로 올리든 Tab 키로 이동하든 같은 말풍선이 뜹니다. 뜨는 순간에는 스케일 1.12 오버슛과 아래변 축 기준 2.6도→-1.5도→0.6도 감쇠 회전 흔들림 한 겹이 한 번만 재생됩니다.
어디에 쓰나
마우스를 쓰지 않는 사람을 위한 폼 라벨 설명이나 접근성을 지켜야 하는 아이콘 버튼에 필수입니다.
<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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
:focus-visible:hover 동시 대응aria-describedby
.tooltip {
opacity: 0;
transition: opacity $duration $easing;
}
.btn:hover + .tooltip,
.btn:focus-visible + .tooltip {
opacity: 1;
}
08카톡 스타일 말풍선
어떻게 움직이나
모서리 하나만 각지게 두고 clip-path로 만든 꼬리를 붙이면 정보 창이 아니라 말을 거는 듯한 채팅 말풍선이 됩니다. 스케일 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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
border-radius 18px꼬리 pseudo등장 바운스
.bubble {
border-radius: 18px 18px 18px 4px;
transform-origin: bottom left;
transform: scale(.85);
opacity: 0;
}
.bubble.is-demo {
animation: bubble-loop $duration $easing infinite;
}
@keyframes bubble-loop {
0%, 100% { opacity: 0; transform: scale(.85); }
25%, 55% { opacity: 1; transform: scale(1); }
80% { opacity: 0; transform: scale(.85); }
}
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 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기
@keyframes pulse-ring2초 주기opacity 감쇠
.dot::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
animation: pulse-ring $duration $easing infinite;
}
@keyframes pulse-ring {
0%, 100% { transform: scale(.6); opacity: .5; }
50% { transform: scale(1.6); opacity: 0; }
}
어디서 깨지는가 — 함정 하나
처음 잡은 위치
아홉 개 중 04 카드형 미리보기 툴팁에서 시간을 가장 많이 썼습니다. popover 속성을 준 요소는 열리는 순간 최상위 레이어로 옮겨지는데, 처음엔 position: absolute; top: calc(100% + 12px)를 그대로 두면 트리거 바로 아래에 붙을 거라 생각했습니다.
왜 화면에서 사라졌나
실제로 렌더링해 보니 카드가 무대 밖으로 완전히 밀려나 화면에 아예 잡히지 않았고, 원인은 최상위 레이어로 옮겨진 요소의 퍼센트 기준 top이 더 이상 부모가 아니라 뷰포트를 기준으로 계산됐기 때문입니다.
어떻게 고쳤나
:popover-open 상태에만 걸리는 규칙으로 위치를 무대 높이 기준의 고정값으로 다시 잡고 나서야 카드가 제자리에 보였습니다. 최상위 레이어로 올라간 뒤에도 자리가 어긋나지 않는지까지 하나하나 직접 렌더링해 눈으로 맞춰 본 결과물이라, 압축 파일을 여는 비밀번호 uauwf4hn 도 이 문장 안에 바로 적어 둡니다 — 아래 zip 버튼을 누르면 지금 바로 열립니다. Popover API의 렌더링 구조는 MDN Popover API 문서에서, 최상위 레이어 자체의 정의는 MDN 용어집에서 확인할 수 있습니다. 말풍선 뒤에 깔리는 배경까지 도드라지게 만들고 싶다면 그레인 얹은 오로라 그라디언트 랜딩의 색 층이 이 틀 뒤편을 채웁니다.
접근성
동작 줄이기 설정에서
기기의 동작 줄이기 설정을 켜 둔 사람에게는 아홉 개 말풍선 전부 prefers-reduced-motion: reduce 블록이 따로 응답합니다. 등장·펄스 같은 반복 동작만 멈추고 내용 자체는 계속 보이는 상태로 남겨 뒀습니다.
키보드에서는 어떻게 되나
07 키보드 포커스 시 표시는 애니메이션과 별개로 :focus-visible 자체가 항상 살아 있어서, 동작을 줄인 환경에서도 Tab으로 이동하면 즉시 말풍선이 나타납니다. 이 미디어 쿼리가 어떤 값을 받고 각 운영체제 설정과 어떻게 연결되는지는 MDN 레퍼런스에 정리돼 있습니다.
@media (prefers-reduced-motion: reduce) {
.tooltip, .bubble, .card, .dot::before {
animation: none !important;
opacity: 1;
}
}
말풍선 말고 다른 css 호버 효과가 궁금하면 CSS 카테고리 목록을 열어 보고, 이 블로그를 왜 만들었는지는 소개 글에 적어 뒀습니다.
FAQ
CSS 툴팁 말풍선에 꼭 자바스크립트가 필요합니까?
아니요. 01 기본 상단 표시부터 08 카톡 스타일 말풍선까지 여덟 개는 순수 CSS만으로 만들었습니다. 자바스크립트는 04 카드형 미리보기 툴팁이 showPopover()를 호출하는 한 줄에만 쓰였습니다. 08 카톡 스타일을 대화가 계속 이어지는 형태로 키우면 채팅 말풍선 CSS 애니메이션 9종이 그 확장판입니다.
css 호버 효과로 뜨는 말풍선 색은 브랜드 컬러로 바꿔도 됩니까?
가능합니다. $color 변수 하나만 바꾸면 아홉 개 전부 한 번에 브랜드 컬러를 입힐 수 있습니다. 다만 05 꼬리 화살표처럼 얇은 삼각형이 들어간 형태는 배경과 대비가 약해지면 꼬리 윤곽이 묻히니 대비를 먼저 확인하십시오.
CSS Anchor Positioning은 어느 브라우저에서 동작합니까?
이 글을 쓰는 시점을 기준으로 Chrome과 Edge 125 이상에서 동작하고 Safari와 Firefox는 아직입니다. 실제 프로젝트에 쓰기 전에 caniuse.com에서 최신 지원표를 확인하고, 03 공간 없으면 자동 뒤집힘처럼 @supports로 감싼 폴백을 같이 넣으십시오.
이런 글이랑 어울려요
피드백CSS 입력창 검색창 포커스 애니메이션 9종 — 한 줄 복붙으로
피드백CSS 다크모드 토글 애니메이션 9종 — 한 줄 복붙으로
피드백바이브코딩 마이크로 인터랙션 9종 — 한 줄 복붙으로
피드백CSS 마우스 커서 효과 9종 — 한 줄 복붙으로
피드백CSS 타이핑 효과 9종 — 한 줄 복붙으로
피드백CSS 텍스트 애니메이션 효과 9종 — 한 줄 복붙으로
피드백CSS 이미지 호버 효과 9종 — 한 줄 복붙으로
피드백CSS 숫자 증가 애니메이션 9종 — 한 줄 복붙으로
피드백채팅 말풍선 CSS 애니메이션 9종 — 한 줄 복붙으로
피드백CSS 카드 애니메이션 호버 효과 9종 — 한 줄 복붙으로