Word by Word Tooltip
The bubble opens and its words rise out of a blur one after another. Each word is a span with an --i index that sets its transition delay, so any sentence staggers.
Also known as: animated text tooltip, staggered text tooltip, text reveal tooltip css.
Every change saves as you type
HTML
<span class="tip-word-by-word"> <button type="button" aria-describedby="tip-word-by-word-tip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.5 18.5H17a4 4 0 0 0 .4-8 5.5 5.5 0 0 0-10.6 1.2 3.4 3.4 0 0 0 .7 6.8z"/></svg>Autosave</button> <span class="tip-word-by-word-tip" id="tip-word-by-word-tip" role="tooltip"><span style="--i: 0">Every</span> <span style="--i: 1">change</span> <span style="--i: 2">saves</span> <span style="--i: 3">as</span> <span style="--i: 4">you</span> <span style="--i: 5">type</span></span> </span>
CSS
.tip-word-by-word {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
}
.tip-word-by-word button {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.6em 1.2em;
border: 0;
border-radius: 0.5em;
background: var(--c);
color: #fff;
font: 600 1em system-ui, sans-serif;
cursor: pointer;
}
.tip-word-by-word svg {
width: 1.25em;
height: 1.25em;
}
.tip-word-by-word button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.tip-word-by-word-tip {
position: absolute;
bottom: calc(100% + 0.7em);
left: 50%;
z-index: 10;
padding: 0.5em 0.85em;
border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
border-radius: 0.55em;
background: #fff;
box-shadow: 0 0.6em 1.2em -0.5em color-mix(in srgb, var(--c) 60%, transparent);
color: #0f172a;
font: 500 0.85em/1.3 system-ui, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform-origin: 50% 100%;
transform: translateX(-50%) scale(0.9);
transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-word-by-word-tip span {
display: inline-block;
opacity: 0;
filter: blur(0.15em);
transform: translateY(0.5em);
transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.tip-word-by-word:hover .tip-word-by-word-tip,
.tip-word-by-word:focus-within .tip-word-by-word-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
}
.tip-word-by-word:hover .tip-word-by-word-tip span,
.tip-word-by-word:focus-within .tip-word-by-word-tip span {
opacity: 1;
filter: blur(0);
transform: translateY(0);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
transition-delay: calc(0.1s + var(--i) * 0.07s);
}
@media (prefers-reduced-motion: reduce) {
.tip-word-by-word, .tip-word-by-word *, .tip-word-by-word::before, .tip-word-by-word::after, .tip-word-by-word *::before, .tip-word-by-word *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tip-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--tip-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.