Morphing Pill Tooltip
A dot pops up from the button and stretches sideways into a pill, then the label fades in. The stretch is an animated clip-path inset, so the text never squashes.
Also known as: dot to pill tooltip, expanding tooltip css, pill tooltip.
Add to favorites
HTML
<span class="tip-morph-pill"> <button type="button" aria-label="Favorite" aria-describedby="tip-morph-pill-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 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z"/></svg></button> <span class="tip-morph-pill-tip" id="tip-morph-pill-tip" role="tooltip"><span>Add to favorites</span></span> </span>
CSS
.tip-morph-pill {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
}
.tip-morph-pill button {
display: grid;
place-items: center;
width: 2.7em;
height: 2.7em;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.tip-morph-pill svg {
width: 1.3em;
height: 1.3em;
}
.tip-morph-pill:hover button {
background: var(--c);
color: #fff;
}
.tip-morph-pill button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.tip-morph-pill-tip {
position: absolute;
bottom: calc(100% + 0.6em);
left: 50%;
z-index: 10;
padding: 0.5em 1em;
border-radius: 1.15em;
background: var(--c);
color: #fff;
font: 600 0.85em/1.3 system-ui, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
/* a circle as tall as the pill, cut from its middle */
clip-path: inset(0 calc(50% - 1.15em) round 1.15em);
transform: translate(-50%, 0.9em) scale(0.5);
transition: opacity 0.12s ease, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), clip-path 0.2s ease, visibility 0.3s;
}
.tip-morph-pill-tip span {
display: block;
opacity: 0;
transition: opacity 0.1s ease;
}
.tip-morph-pill:hover .tip-morph-pill-tip,
.tip-morph-pill:focus-within .tip-morph-pill-tip {
opacity: 1;
visibility: visible;
clip-path: inset(0 0 round 1.15em);
transform: translate(-50%, 0) scale(1);
transition: opacity 0.12s ease, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), clip-path 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.15s, visibility 0s;
}
.tip-morph-pill:hover .tip-morph-pill-tip span,
.tip-morph-pill:focus-within .tip-morph-pill-tip span {
opacity: 1;
transition: opacity 0.2s ease 0.35s;
}
@media (prefers-reduced-motion: reduce) {
.tip-morph-pill, .tip-morph-pill *, .tip-morph-pill::before, .tip-morph-pill::after, .tip-morph-pill *::before, .tip-morph-pill *::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.