Typing Indicator Tooltip
A chat bubble grows out of an assistant button, shows three bouncing typing dots, then widens to reveal its message. The widening is a clip-path inset, so the text never reflows.
Also known as: chat bubble tooltip css, typing dots tooltip, assistant greeting tooltip.
Hi! Need a hand with your plan?
HTML
<span class="tip-typing-bubble"> <button type="button" aria-label="Open assistant" aria-describedby="tip-typing-bubble-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="M12 3.5l1.8 5.2 5.2 1.8-5.2 1.8-1.8 5.2-1.8-5.2L5 10.5l5.2-1.8z"/></svg></button> <span class="tip-typing-bubble-tip" id="tip-typing-bubble-tip" role="tooltip"><span class="tip-typing-bubble-dots" aria-hidden="true"><i></i><i></i><i></i></span><span class="tip-typing-bubble-msg">Hi! Need a hand with your plan?</span></span> </span>
CSS
.tip-typing-bubble {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
margin: 2em 13em 0 0; /* room for the bubble in this preview */
}
.tip-typing-bubble button {
display: grid;
place-items: center;
width: 2.9em;
height: 2.9em;
padding: 0;
border: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 50%, #a855f7));
box-shadow: 0 0.4em 1em -0.3em color-mix(in srgb, var(--c) 70%, transparent);
color: #fff;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tip-typing-bubble svg {
width: 1.35em;
height: 1.35em;
}
.tip-typing-bubble:hover button { transform: rotate(-8deg) scale(1.06); }
.tip-typing-bubble button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
/* the corner nearest the button stays sharp, so the bubble points at it */
.tip-typing-bubble-tip {
--r: 1.1em 1.1em 1.1em 0.25em;
position: absolute;
bottom: calc(100% + 0.3em);
left: 78%;
z-index: 10;
padding: 0.65em 1em;
border-radius: var(--r);
/* a tinted fill instead of a border or shadow, which the clip-path would cut */
background: color-mix(in srgb, var(--c) 14%, #fff);
color: #0f172a;
font: 500 0.85em/1.3 system-ui, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform-origin: 0 100%;
}
.tip-typing-bubble-dots {
position: absolute;
top: 50%;
left: 1em;
display: flex;
gap: 0.3em;
transform: translateY(-50%);
}
.tip-typing-bubble-dots i {
width: 0.45em;
height: 0.45em;
border-radius: 50%;
background: var(--c);
}
.tip-typing-bubble-msg {
display: block;
opacity: 0;
}
.tip-typing-bubble:hover .tip-typing-bubble-tip,
.tip-typing-bubble:focus-within .tip-typing-bubble-tip {
opacity: 1;
visibility: visible;
animation:
tip-typing-bubble-in 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both,
tip-typing-bubble-grow 1.5s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.tip-typing-bubble:hover .tip-typing-bubble-dots,
.tip-typing-bubble:focus-within .tip-typing-bubble-dots {
animation: tip-typing-bubble-fade 1.15s linear both;
}
.tip-typing-bubble:hover .tip-typing-bubble-dots i,
.tip-typing-bubble:focus-within .tip-typing-bubble-dots i {
animation: tip-typing-bubble-dot 0.6s ease-in-out infinite;
}
.tip-typing-bubble-dots i:nth-child(2) { animation-delay: 0.12s; }
.tip-typing-bubble-dots i:nth-child(3) { animation-delay: 0.24s; }
.tip-typing-bubble:hover .tip-typing-bubble-msg,
.tip-typing-bubble:focus-within .tip-typing-bubble-msg {
animation: tip-typing-bubble-msg 1.5s ease both;
}
@keyframes tip-typing-bubble-in {
0% { opacity: 0; transform: translateY(0.4em) scale(0.5); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* first only a dot-sized pill on the left, then the whole bubble */
@keyframes tip-typing-bubble-grow {
0%, 62% { clip-path: inset(0 calc(100% - 3.95em) 0 0 round var(--r)); }
100% { clip-path: inset(0 0 0 0 round var(--r)); }
}
@keyframes tip-typing-bubble-fade {
0%, 85% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes tip-typing-bubble-msg {
0%, 76% { opacity: 0; transform: translateY(0.3em); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes tip-typing-bubble-dot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-0.3em); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.tip-typing-bubble, .tip-typing-bubble *, .tip-typing-bubble::before, .tip-typing-bubble::after, .tip-typing-bubble *::before, .tip-typing-bubble *::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.