Copy to Clipboard Tooltip
A command chip whose tooltip says Copy, then flips to a filled Copied with a check when you press the button. A long transition-delay on the way back holds the message after release.
Also known as: copied tooltip css, click to copy tooltip, copy button tooltip.
HTML
<span class="tip-copy-button"> <code>npm i motions</code> <button type="button" aria-label="Copy command" aria-describedby="tip-copy-button-tip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8.5" y="8.5" width="11" height="11" rx="2"/><path d="M15.5 8.5V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7.5a2 2 0 0 0 2 2h2.5"/></svg></button> <span class="tip-copy-button-tip" id="tip-copy-button-tip" role="tooltip"><span class="tip-copy-button-idle">Copy</span><span class="tip-copy-button-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>Copied</span></span> </span>
CSS
.tip-copy-button {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
align-items: center;
gap: 0.7em;
padding: 0.3em 0.3em 0.3em 0.9em;
border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
border-radius: 0.6em;
background: color-mix(in srgb, var(--c) 7%, transparent);
}
.tip-copy-button code {
font: 500 0.9em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tip-copy-button code::before {
content: "$ ";
color: var(--c);
}
.tip-copy-button button {
display: grid;
place-items: center;
width: 2.1em;
height: 2.1em;
padding: 0;
border: 0;
border-radius: 0.4em;
background: transparent;
color: var(--c);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.tip-copy-button button svg {
width: 1.15em;
height: 1.15em;
}
.tip-copy-button:hover button { background: color-mix(in srgb, var(--c) 16%, transparent); }
.tip-copy-button button:active { transform: scale(0.9); }
.tip-copy-button button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.tip-copy-button-tip {
position: absolute;
bottom: calc(100% + 0.65em);
/* centered over the button: 0.3em of padding plus half its 2.1em */
left: calc(100% - 1.35em);
z-index: 10;
display: grid;
padding: 0.4em 0.7em;
border-radius: 0.45em;
background: color-mix(in srgb, var(--c) 14%, #0f172a);
box-shadow: 0 0.5em 1em -0.4em rgb(0 0 0 / 0.5);
color: #fff;
font: 600 0.8em/1.3 system-ui, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 0.35em);
/* the way back from Copied waits 1.2s */
transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s, background-color 0.2s ease 1.2s;
}
.tip-copy-button-tip::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0.6em;
height: 0.6em;
background: inherit;
transform: translate(-50%, -50%) rotate(45deg);
}
/* both labels share one grid cell, so the bubble fits the wider one */
.tip-copy-button-tip > span {
display: inline-flex;
grid-area: 1 / 1;
align-items: center;
justify-content: center;
gap: 0.3em;
transition: opacity 0.2s ease 1.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s;
}
.tip-copy-button-done {
opacity: 0;
transform: translateY(0.5em);
}
.tip-copy-button-done svg {
width: 1.1em;
height: 1.1em;
stroke-width: 3;
}
.tip-copy-button:hover .tip-copy-button-tip,
.tip-copy-button:focus-within .tip-copy-button-tip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
/* pressed: switch at once */
.tip-copy-button button:active + .tip-copy-button-tip {
background: var(--c);
transition: opacity 0.18s ease, transform 0.25s ease, visibility 0s, background-color 0s;
}
.tip-copy-button button:active + .tip-copy-button-tip .tip-copy-button-idle {
opacity: 0;
transform: translateY(-0.5em);
transition: none;
}
.tip-copy-button button:active + .tip-copy-button-tip .tip-copy-button-done {
opacity: 1;
transform: translateY(0);
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.tip-copy-button, .tip-copy-button *, .tip-copy-button::before, .tip-copy-button::after, .tip-copy-button *::before, .tip-copy-button *::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.