Tooltip
A small caption floats above an element on hover or focus
Live preview (drag the parameters, watch it change)
Code
<span class="tg" tabindex="0">把鼠标放上来<span class="tp">这就是气泡提示</span></span>
<style>
.tg { position: relative; cursor: help; }
.tp { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
background: #141414; color: #fff; font-size: 12.5px; padding: 6px 10px; border-radius: 7px;
white-space: nowrap; opacity: 0; pointer-events: none; transition: all .22s cubic-bezier(.22,1,.36,1); }
.tp::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
border: 5px solid transparent; border-top-color: #141414; }
.tg:hover .tp, .tg:focus .tp { opacity: 1; transform: translateX(-50%) translateY(0); }
</style><span class="group relative cursor-help">把鼠标放上来
<span class="pointer-events-none absolute bottom-[calc(100%+9px)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-md bg-neutral-900 px-2.5 py-1.5 text-xs text-white opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100">气泡提示</span>
</span>export function Tooltip({ label, children }) {
const [show, setShow] = React.useState(false);
return (<span style={{ position: "relative", cursor: "help" }} tabIndex={0}
onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}
onFocus={() => setShow(true)} onBlur={() => setShow(false)}>{children}
<span style={{ position: "absolute", left: "50%", bottom: "calc(100% + 9px)", whiteSpace: "nowrap",
transform: `translateX(-50%) translateY(${show ? 0 : 4}px)`, opacity: show ? 1 : 0, pointerEvents: "none",
background: "#141414", color: "#fff", fontSize: 12.5, padding: "6px 10px", borderRadius: 7,
transition: "all .22s cubic-bezier(.22,1,.36,1)" }}>{label}</span></span>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
一个相对定位的触发元素 + 绝对定位的小气泡，默认 opacity 0，:hover 和 :focus 时淡入并微微上移，再加一个小三角指向触发点。三个规矩：提示里不放必须点的东西、不放长文本、移动端点按要有替代（很多场景干脆把解释写进正文）。
How it works (English)
A relatively-positioned trigger plus an absolutely-positioned bubble: opacity 0 by default, fading in with a slight rise on :hover and :focus, with a small triangle pointing back. Three rules: nothing clickable inside, no long text, and on touch devices provide an alternative — often the explanation belongs in the body copy anyway.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。